There are plenty of reasons to expand the content area of a box without affecting its relationship to neighbouring elements. If you think it's not possible, put some long nowrap 'd text in a box, set a width on the box, and watch how the overflowed content does nothing to the layout. Yes, this is still relevant with CSS3 in ; case in point: flexbox layouts.
Flexbox items' margins do not collapse, so in order to space them evenly and align them with the visual edge of the container, one must subtract the items' margins from their container's padding.
Summing doesn't work cleanly when flex elements' content have margins defined in different units or are affected by a different font-size, etc. The example below should, ideally have aligned and evenly spaced grey boxes but, sadly they aren't. I have encountered enough of these little issues over the years where a little negative padding would have gone a long way, but instead I'm forced to add non-semantic markup, use calc , or CSS preprocessors which only work when the units are the same, etc.
Asked By: ikartik Answered By: ikartik Answered By: zzzzBov. Answered By: WebWanderer. Answered By: Rolf. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis. Because of this, CSS layouts have since then been synonymous with coding elegance. Out of all the CSS concepts designers have ever used, an award probably needs to be given to the use of Negative Margins as being the most least talked about method of positioning.
We all use margins in our CSS, but when it comes to negative margins, our relationship somehow manages to take a turn for the worse. A few things to note about negative margins are:. Negative margins are very powerful when used correctly. There are 2 types of scenarios where negative margins take center stage. A static element is an element with no float applied. The image below illustrates how static elements react to negative margins.
For example:. Instead, it pulls any succeeding element into the main element, overlapping it. If a negative margin is applied opposite a float, it creates a void leading to the overlapping of content. The padding CSS shorthand property sets the padding area on all four sides of an element at once.
Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element. When we set it negative, then border will overlap the content. Maybe that would be useful but, hey, content extended beyond its boundaries? That would make calculations of the element dimensions and position on the page definitely troublesome.
In this case we can assume that the height still has the value of 16px the font size. When content extends its boundaries the border , the space occupied by the content overlaps the margin space!
These all above are just my speculations. If you stumbled upon any reliable resource that explains the decision behind allowing negative margin and disallowing negative padding, feel free to share it in the comments! Marta Sztybor This post is inspired with a discussion we had once at our workplace. The spec defines it as it goes: The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
Margin pushes away the content from any other existing boxes. It is used to make the horizontal and vertical space between elements. When margin is set to zero, it means that the margin edge is the same as the border edge. When bottom or right margin is set to negative, it pulls only the following elements up or left.
0コメント