CSS填充和寬度

考慮下面的代碼：CSS填充和寬度

#container { 
    width:500px; 
} 

#inside { 
    padding:10px; 
    width:100%; 
}

如果讓我選擇寬度：100％;將它是相同的，指出「寬度480：像素」（也就是，已經計算填充）還是會爲「寬度：500像素」

由於

喬爾

來源

2010-10-13 Joel

它會像width:500px和附加所述填充它將推溢出的內側的#container ..

但如果#inside是塊元素，那麼就給填充將使它表現爲好像它是width:480px

實施例在http://www.jsfiddle.net/uA9LV/

來源

2010-10-13 17:58:22

不完全。它根本不會推動#container的內部。相反，＃內容將在容器外面結束。 – NotMe 2010-10-13 18:22:13

@克里斯，確實...這是一個比喻，但不適合在這種情況下..編輯:) – 2010-10-13 18:23:50

順便說一句，我正在挖jsfiddle.net。看起來像一個非常好的方式來呈現代碼。 – NotMe 2010-10-13 18:24:40

這將是相同的寬度父容器提供它的一個塊級元素。因此#inside寬度爲500px，每邊填充10px。

來源

2010-10-13 17:58:56 jacobangel

我把它放在一個示例文檔中，容器div只調整了3邊（左邊，頂部和底部）..並且裏面的div將容器的邊界向外推到了20px的右邊。

我在IE8，Firefox 3.6.10和最新的Chrome中測試過。使用各種文檔類型無效。

我使用的代碼是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Untitled</title> 
    <style> 
     #container { 
      width:500px; 
      border: solid 1px blue; 
     } 

     #inside { 
      padding:10px; 
      width:100%; 
      border: solid 1px red; 
     } 
    </style> 
</head> 
<body> 
<div id="container"> 
    <div id="inside"> 
     Hello World! 
    </div> 
</div> 
</body> 
</html>

注：如果您刪除從#inside DIV的寬度聲明，那麼你會得到你想要什麼。這是一個內部div，寬度爲480px，每邊填充10px。查看此鏈接瞭解更多信息：Solving the CSS Padding problem。

來源

2010-10-13 18:08:25 NotMe

CSS填充和寬度

回答

相關問題