All geek questions in one place

This is mistake? fields of element P go beyond div

I use Firefox3 on Ubuntu (And I found an error in SO, whereas: -D) The expected behavior is not to see the difference between the DIV, but the margin is displayed based on the fields P.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <style>
        p{
            background-color: transparent;
            margin: 10px;
            color: white;
        }
        div{
            background-color: black;
            margin:0;
            width: 300px;
        }
   </style>
</head>
<body>
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
</body>
</html>
+3
source share
3 answers

This behavior, as defined in the CSS field model:

8.3.1 Collapsing fields

In this specification, the expression for folding fields means that adjacent fields (without filling or border areas separate them) from two or more boxes (which can be next to one another or nested) are combined to form a single stock.

In CSS2, horizontal margins will never collapse.

:

  • . - . . , .
  • .
  • .

http://www.w3.org/TR/CSS2/box.html

, , - () -, , , (, ).

, div (.. div div), div.

+14

FF Windows, p , div. IE7.

, , , .

, .

0

, . , p{padding:100px;}.

0

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

More articles:


All Articles