All geek questions in one place

Why?

Having HTML below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div>
    <div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div>
</body>
</html>

the space between these two DIVs is only 10 pixels.

Why? Explain, please.

+3
source share
3 answers

This behavior is called field folding . Field values ​​are not added, but a higher value is used:

Vertical fields can fall apart between certain cells:

  • Two or more adjacent vertical fields of block blocks during normal flow. The resulting field width is the maximum width of adjacent fields. [...]
  • [...]
+6
source

. , , , CSS .

+1

if you want the desired effect, you can use "indentation", the fields are always compressed

+1
source

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

More articles:


All Articles