Question

为什么：

<html>
  <head>
  <style>
    #categorizer { border-style: solid; border-width: 10px; 
                   border-color: blue; padding: 50px }
    #children { color: green; background-color: yellow }
    #parents { color: blue; background-color: #ccc }
  </style>
  </head>
  <body>
    <span id="categorizer">
      <span id="children">
        <span class="child">c11111</span>
        <span class="child">c22222</span>
        <span class="child">c33333</span>
        <span class="child">c44444</span>
        <span class="child">c55555</span>
      </span>
      <span id="parents">
        <span class="parent">pAAA</span>
        <span class="parent">pBBB</span>
      </span>
    </span>
  </body>
</html>

只给我三个边界，即

enter image description here

Answer 1

正如Cody Guldner在评论中暗示的那样，你的span是内联元素，而不是块元素。因此，填充不会改变文本的垂直间距;它只是在文本周围添加填充，然后将边框添加到填充的边缘。正是这种衬垫将顶部的蓝色边框推开了。

Answer 2

您还可以将display：block添加到分类程序

#categorizer { border-style: solid; border-width: 10px; 
               border-color: blue; padding:50px; display:block; }

为什么这个html边框只有3个边？

2 个答案: