爲什麼這個html邊界只有三面？

爲什麼：爲什麼這個html邊界只有三面？

<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

來源

2013-04-07 Michael Durrant

首先，你不應該使用'span'。在這種情況下'div'會更合適，因爲這些不是內聯元素。而你不應該使用w3schools – 2013-04-07 14:57:27

正如他的評論暗示的科迪Guldner，你span s爲內聯元素，而不是塊元素。因此，填充不會更改文本的垂直間距;它只是在文本的周圍添加填充，然後將邊框添加到填充的邊緣。正是這種填充將頂部藍色邊框推到視線之外。

來源

2013-04-07 14:58:40 BoltClock

修改爲div修復它。 – 2013-04-07 15:00:29

您還可以添加顯示：塊到分類

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

來源

2013-04-07 15:07:45

爲什麼這個html邊界只有三面？

回答

相關問題