Mon, 2015-11-02 15:31
Hi there:
I'm new to CSS.
In order to explain myself, I came up with this little piece of code, in the HTML, it is just two nested divs, the outer div has a class of outer and the inner has a class of inner
.outer { width: 200px; height: 200px; background: url(_images/grid.gif); /*This is just a grid*/ background-position: 5px 5px; } .inner { width: 150px; height: 50px; border: 5px solid brown; padding: 5px; margin: 10px; }
It produces what's depicted in Figure 1, note that the top margin of the .inner box is collapsed to 0.
But if I add a border to .outer then the top margin of the .inner is respected (See Fig 2)
It only happens when it's the first element on the normal flow page
What's the CSS rule that determines the collapse of the first element when no border or padding has been set to its container?
Thanks in advance
Rafael
| Attachment | Size |
|---|---|
| Fig 1.png | 4.4 KB |
| Fig 2.png | 4.1 KB |
Mon, 2015-11-02 19:56
#1
It always happens; first, last or in between.
Meyer left off or didn't know about block formatting context. Setting overflow to other than 'visible' will trigger a new block formatting context. So will various display values, e.g. inline-block or table. Likewise set float right|left.
Example:
.outer { display: inline-block; background-color: yellow; width: 200px;} .inner { height: 50px; border: 5px solid brown; padding: 5px; margin: 10px;}
<div class="outer"> <div class="inner"> ... </div> </div>
cheers,
gary