Top to bottom properties in "Create a Graphic Using CSS"

Top to bottom properties in "Create a Graphic Using CSS"
0

#1

Hello,

could sb explain why in challenges with CSS graphics (e.g. this one: https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-graphic-using-css), the top, left, right, bottom properties are all set to zero, and still the div they describe is located in the center of the page? What are they away from at zero distance? And as soon as you delete the properties, the div moves to the top left corner, even though its margin is set to auto, so it should be centered along the horizontal axis, shouldn’t it?

Would appreciate any tips.

Thank you,


Bard Andron


#2

If I’m not mistaken, margin: auto only centers the item horizontally on the page. By setting the element to absolute positioning with each margin set to 0, it tries to position it at 0px from the left, top, right, and bottom, which is impossible. But since the margin is auto, with absolute positioning, the margins will auto adjust to put it in between the two corners, or directly in the center.

While it’s a confusing way to look at it, it essentially just makes the object be centered both horizontally and vertically.


#3

Thank you for the answer. I had never thought the zero margin is impossible :smiley:

the margins will auto adjust to put it in between the two corners

What corners do you have in mind?


#4

top: 0, left: 0 puts it top left corner and the opposites put it bottom right. So the middle of the two is right in the middle of the page!


#5

Ok, got it. This is brilliant!