CSS lessons margin bug


#1


https://www.codecademy.com/courses/web-beginner-en-6merh/3/3?curriculum_id=50579fb998b470000202dc8b


Codeacademy is treating margin property like CSS positioning, but if you don't specify top right bottom or left, that elements will still be positioned static. Is it by design?


div {
	height: 100px;
	width: 100px;
	border-radius: 5px;
	border: 2px solid black;
}

#inner {
	height: 75px;
	width: 75px;
	background-color: #547980;
	/*Add your CSS here!*/
	position: relative;
	margin-left: 200px; /*Here. What is the point of that? */
      /*left: 200px; Why not like that?*/
}

#outer {
	height: 1500px;
	width: 150px;
	background-color: #45ADA8;
	position: absolute;
	margin-left: 100px; 
}


#2

what do you mean? margin-left still allows you to position elements by pushing them around, left works slightly different under the hood, but what in this case with just two elements does it matter if you use left or margin-left?


#3

I think it matters, because the lessons are focused on position property, and margin property is not related to position. In this case, position could be anything, because #inner will be always position:static. Correct me if I'm wrong, please. If you use position:absolute for #inner and position:static for #outer, left:20px will put square 20px right of html, and margin-left:20px will put square 20px right of #outer border.


#4

no, the lesson are focused on positionING, there is a huge difference there. Margin and left (right and so on) are crucial property's for positioning, along with the position property.

yes, you are right about this.

no, #inner will just be pushed 20px to the right inside #outer


#5

Right, sorry.
Let me rephrase my question - what is the point of changing position property in these lessons, when top, right, bottom, and left are not specified?


#6

It doesn't directly serve a purpose


#7

But isn't that confusing? F.ex. this lesson asks for:

So it's suggesting, that position is related to margin, isn't it?


#8

No, that doesn't mean they are related. I am personally for a upgrade of this course, unfortunately this is not up to me. i tried compensating for it by writing answers like these, more i can't do. Well, it is logic to combine the position property with margin/left given it allows you place the element around the page


#9

I understand, thank you very much for your time and patience :slight_smile:


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.