盒模型本质-宽高的底层逻辑【全网首发】权威硬核计算公式-彻底理解盒模型中宽度和高度计算的底层逻辑。了解真相, 才能获得真

1 示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Examples of margins, padding, and borders</title>
    <style type="text/css">
      ul {
        background: yellow;
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
        /* No borders set */
      }
      li {
        color: white; /* text color is white */
        background: blue; /* Content, padding will be blue */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none; /* no glyphs before a list item */
        /* No borders set */
      }
      li.withborder {
        border-style: dashed;
        border-width: medium; /* sets border width on all sides */
        border-color: lime;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>First element of list</li>
      <li class="withborder">
        Second element of list is a bit longer to illustrate wrapping.
      </li>
    </ul>
  </body>
</html>

Note:

• The content widthp. 99 for each LI box is calculated top-down; the containing blockp. 113 for each LI box is established by the UL element.
• The margin box height of each LI box depends on its content heightp. 99, plus top and bottom padding, borders, and margins. Note that vertical margins between the LI boxes collapse.p. 103
• The right padding of the LI boxes has been set to zero width (the 'padding'p. 106 property). The effect is apparent in the second illustration.
• The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
• The second LI element specifies a dashed border (the 'border-style'p. 109 property)
-- copy from CSS 2.1 Specification

杰哥译:

每个li盒子的内容区宽度计算是自顶向下的; 每个li盒子的包含块(containing block)是由ul元素建立的
每个li盒子的margin box高度取决于li元素内容区的高度+上下padding+上下border+上下margin. 注意, 两个li盒子垂直方向的margin合并了
li盒子的右padding设置为0, 效果见第二张图
li盒子的margin是透明的--margins永远是透明的--因此, ul的填充, 内容区的背景颜色(黄色)穿透了它们(li的margin)
第二个li元素指定了虚线边框