How does margin work in css

For example, in certain cases this value can be used to center an element. This property can be used to set a margin on all four sides of an element. Margins create extra space around an element, unlike padding , which creates extra space within an element. To center something horizontally in modern browsers, you can use display : flex; justify-content : center;. Shadow Effects Box Shadow. This element has a margin of 70px.

Report Error. Your message has been sent to W3Schools. W3Schools is optimized for learning and training. In cases like this, it's actually a good thing, though. If there are several elements with different margins, there is no need to add the margins together to see how large the gap between the elements is because we can rely on the fact that the larger margin always wins.

That said, one instance where margin collapse causes all sorts of confusion is when the first child within an element has a margin-top that merges with the parent's margin-top. There is a white space between the top of the viewport and the black box. That's not from the body it's much bigger than the 8px margin the body would have.

To help explain exactly what's happening here, let's add a much bigger margin-top to the h1. I see people do this all the time, trying to push the title down within its parent. However, rather than working as expected, we get a giant space on top of the entire card! There is nothing separating the top of the child and the parent in this case. So when we add margin-top to the child, it touches the parent's margin-top. And, as we saw above, when two margins touch one another, they merge into a single margin.

Similarly, in the code above we gave all paragraphs a margin-bottom. That margin on the p. Although this isn't causing an issue for the site we are currently creating, it could cause problems if we later decided to add further elements to the page. If I want space between the top of the. Beginners often get mixed up between margin and padding. My general rule of thumb is if you want empty space, use margin.

If you want more background, use padding. In this case, we want our. Instead we should add padding to that element itself. In the image above, we can see the padding and the margin. This prevents the. Hence auto will have a value of 0px in those elements. All the examples I showed you so far have widths. A width of value auto will have 0px margins. W3C spec says it like this:. The why, well that is so far, a mystery.

It could be because of the typical vertical page flow, where page size increases height-wise. But before that, we need to find out when will margin:auto actually work like we want it to in an absolutely positioned element. This is where another W3C spec comes in:.