All geek questions in one place

What is CLEARANCE in CSS

So, I read the CSS specification to better understand how to use style properties and attributes in my code. The Box model currently has Collapsing Margins, http://www.w3.org/TR/CSS2/box.html#collapsing-margin , and I came across this line in the spec.

If the upper and lower margins of an element are adjacent with a gap, its margins are collapsed with the adjacent fields of the next siblings, but this resulting margin does not collapse from the lower edge of the parent block

Anyone want to explain what really means please? Also shines more light on the gap, as used above, please. Will definitely appreciate your input here.

+4
source share
2 answers

Perhaps look at it like this.

Suppose you have a left floating point element. Lets call it block F. This block is taken out of the stream using float, so the next element of the block (suppose it does not float and calls this block B) starts exactly at the same horizontal and vertical position as block F. When the text is placed in block B, it begins to fill in block B, but the text will not overlap with block F. What the float does.

Suppose there is another block element that also does not float and calls this C block. (This will be our important one). Block C will be placed immediately below block B. This, depending on the relative heights of blocks F and B, may begin above or below the bottom of block F.

- , F, B, C -

, clear:left C. C F, clear:left , .

C F, C , F. , , .

[ . "" , , ? "" "". , CSS- .]

, , , .

, , , , "none", , . , C, C clear:left.

, , , HTML, CSS.

+3

, , "", , / :

http://www.w3.org/TR/CSS2/visuren.html#clearance

, "none", . . .

0

Source: https://habr.com/ru/post/1526225/

More articles:


All Articles