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. This is the margin collapsing scenario which catches people out most often, as it does not seem particularly intuitive. See the Pen Margins: empty boxes by Rachel Andrew. Adding anything to that box (even padding) will cause the top and bottom margins to be used and not collapse. This is due to the two margins collapsing. 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 100 pixels, but 50. If a box is empty, then its top and bottom margin may collapse with each other. See the Pen Margins: adjacent siblings by Rachel Andrew. The margin between the second two elements in 3em, as 3em is larger than the 20 pixels on the bottom of the second element. The margin between the first two elements is 50 pixels, as the smaller top margin is combined with the larger bottom margin. The third has a top and bottom margin of 3em. The second has a top and bottom margin of 20px. The first has a top and bottom margin of 50 pixels. In the CodePen example below, there are three div elements. 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. My initial description of margin collapsing is a demonstration of how the margins between adjacent siblings collapse. Let’s take a look at each of these scenarios in turn, before looking at the things which prevent margins from collapsing in these scenarios. Margins collapse in the following situations: The smaller margin essentially ending up inside the larger one. When margins collapse, they will combine so that the space between the two elements becomes the larger of the two margins. 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. Margin collapsing makes sense if you consider that in those early days, CSS was being used as a documenting formatting language. This collapsing behavior has been the source of margin-related frustration ever since. The CSS1 specification, as it defined margins, also defined that vertical margins collapse. This specification refers back to CSS2 for the definitions of the Box Model and margins, therefore it is the CSS2 definition we will be using for the majority of this article. There is now a Level 3 Box Model specification as a Working Draft. The specification describes the content box, padding box, border box, and margin box, each being defined by the edges of the content, padding, border, and margin respectively. The CSS2.1 specification has an illustration to demonstrate the Box Model and also defines terms we still use to describe the various boxes. The four margin properties for each side of the box and the margin shorthand were all defined in CSS1. In CSS1, the Box Model was detailed with the ASCII art diagram shown in the image below. The Box Model refers to how the various parts of a box - the content, padding, border, and margin - are laid out and interact with each other. The CSS Box ModelĪs with all articles about parts of the CSS Box Model, we should define what we mean by that, and how the model has been clarified through versions of CSS. In particular, we will be looking at how margins interact with each other, and how margin collapsing actually works. The margin-top, margin-right, margin-bottom and margin-left properties were described right back in CSS1, along with the shorthand margin for setting all four properties at once.Ī margin seems to be a fairly uncomplicated thing, however, in this article, we will take a look at some of the things which trip people up with regard to using margins. One of the elements in the Box Model is the margin, a transparent area around a box, which will push other elements away from the box contents. One of the first things most of us learned when we learned CSS, was details of the various parts of a box in CSS, described as The CSS Box Model. However, there is more to a margin than you might think. Applied to an element it forms a space around the element, pushing other elements away. Margins in CSS seem simple enough at first glance.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |