Why won margin top work

Then, set the margin-right to a larger value to make the change more clear. Here is the modified code the only change in the following code is that I have removed the width property in order to increase the width of div to occupy the whole width of the body :. Why does this CSS margin-top style not work? Asked ago. Active 3 hr before. Viewed times. The first one has a margin-top of 2 centimeters, meaning that it is pushed down by 2cm, leaving a gap at the top of the content.

The second one has no margin-top of its own. The bottom block has a margin-top of -1em set on it, meaning that it is pushed up to overlap the second block slightly. However it will eventually be removed from the specification when fully competent people take control over the standards. Found this article by Googling — I had the same issue, but your use of display: inline-block proved to be the solution. Dvaeer 5 5 bronze badges.

Lars Beck Lars Beck 2, 2 2 gold badges 20 20 silver badges 23 23 bronze badges. Navid Navid 41 4 4 bronze badges. Had the same issue only margin left and roght worked solved it by changing the display to flex. Phuri Sottatipreedawong Phuri Sottatipreedawong 39 3 3 bronze badges. Where does it go? Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password.

Post as a guest Name. Email Required, but never shown. The Overflow Blog. Margins of absolutely positioned boxes do not collapse not even with their in-flow children. Margins of inline-block boxes do not collapse not even with their in-flow children. The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance. A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins if any collapse.

When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed. If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's. Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved.

The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border. Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.

The 'padding' shorthand property sets the padding for all four sides while the other padding properties only set their respective side. Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

The CSS1 specification, as it defined margins, also defined that vertical margins collapse. This collapsing behavior has been the source of margin-related frustration ever since. Margin collapsing makes sense if you consider that in those early days, CSS was being used as a documenting formatting language. Margin collapsing means that when a heading with a bottom margin, is followed by a paragraph with a top margin, you do not get a huge gap between those items.

When margins collapse, they will combine so that the space between the two elements becomes the larger of the two margins. The smaller margin essentially ending up inside the larger one. My initial description of margin collapsing is a demonstration of how the margins between adjacent siblings collapse. Other than in the situations mentioned below, if you have two elements displaying one after the other in normal flow, the bottom margin of the first element will collapse with the top margin of the following element.

In the CodePen example below, there are three div elements. The first has a top and bottom margin of 50 pixels. The second has a top and bottom margin of 20px. The third has a top and bottom margin of 3em. The margin between the first two elements is 50 pixels, as the smaller top margin is combined with the larger bottom margin. The margin between the second two elements in 3em, as 3em is larger than the 20 pixels on the bottom of the second element.

If a box is empty, then its top and bottom margin may collapse with each other. In the following CodePen example, the element with a class of empty has a top and bottom margin of 50 pixels, however, the space between the first and third items is not pixels, but This is due to the two margins collapsing. Adding anything to that box even padding will cause the top and bottom margins to be used and not collapse. This is the margin collapsing scenario which catches people out most often, as it does not seem particularly intuitive.

In the following CodePen, I have a div with a class of wrapper, and I have given that div an outline in red so that you can see where it is. The three child elements all have a margin of 50 pixels. However, the first and last items are flush with the edges of the wrapper; there is not a pixel margin between the element and the wrapper.