如何通過CSS在/ div容器中添加填充空間？

我得通過CSS樣式定義的簡單/ DIV容器稱爲「content_bottom」像這樣的：

border-top: 5pt solid #f4f4f4; 
padding: 10pt; 
border-collapse: separate; 
text-align: left;

當我開始在裏面輸入文字，我注意到，文本開始觸摸框的最左邊緣。我試圖添加填充，甚至邊界（通過CSS樣式）的容器，但沒有效果。但是，添加頂部/底部邊界DID會產生影響。爲什麼是這樣？我應該怎麼做才能使文本不會觸及框的左邊（和頂部）？謝謝。

P.S.這是網頁的完整HTML：

<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
<title>site title goes here</title> 
<link rel="stylesheet" href="penonek.css" type="text/css"> 
</head> 
<body> 
<div class="wrapper"> 
<div class="column_top">this <br> 
</div> 
<div class="content_top">is site title<br> 
</div> 
<div class="column_bottom"> 
<ul> 
<li>home</li> 
<li><a href="#">link 1</a></li> 
<li><a href="#">link 2</a></li> 
<li><a href="#">link 3<br> 
</a></li> 
</ul> 
</div> 
<div class="content_bottom">this is the container's content<br> 
</div> 
</div> 
</body> 
</html>

以下是完整的CSS：

body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background-color: black; 
    font-family: Arial,Helvetica,sans-serif; 
    color: #cccccc; 
    font-size: 16pt; 
} 
.wrapper { 
    margin: auto; 
    min-width: 900pt; 
    font-family: Arial,Helvetica,sans-serif; 
    width: 900pt; 
    color: #cccccc; 
} 
.column_top { 
    border-width: 0 0 5pt; 
    border-bottom: 5pt solid black; 
    min-width: 150pt; 
    color: #333333; 
    width: 150pt; 
    max-width: 150pt; 
    background-color: #f4f4f4; 
    float: left; 
    min-height: 45pt; 
    max-height: 45pt; 
    height: 45pt; 
    padding-top: 105pt; 
    font-size: 40pt; 
    text-align: right; 
    font-weight: bold; 
} 
.content_top { 
    border-width: 0 0 5pt; 
    border-bottom: 5pt solid #f4f4f4; 
    height: 45pt; 
    min-height: 45pt; 
    max-height: 45pt; 
    padding-top: 105pt; 
    text-align: left; 
    font-size: 40pt; 
    font-weight: bold; 
} 
.column_bottom { 
    border-width: 5pt 0 0; 
    border-top: 5pt solid black; 
    color: #333333; 
    background-color: #f4f4f4; 
    width: 145pt; 
    min-width: 145pt; 
    max-width: 145pt; 
    text-align: right; 
    padding-top: 50pt; 
    padding-right: 5pt; 
    float: left; 
} 
.content_bottom { 
    border-top: 5pt solid #f4f4f4; 
    padding: 10pt; 
    border-collapse: separate; 
    text-align: left; 
} 
.column_bottom ul { 
    margin: 0; 
    padding: 0; 
    font-weight: inherit; 
    color: #333333; 
    list-style-type: none; 
    text-decoration: none; 
} 
.column_bottom a:hover { 
    background-color: #999999; 
} 
.column_bottom a { 
    text-decoration: none; 
    font-weight: inherit; 
    color: #333333; 
}

來源

2011-02-11 hpy

填充絕對應該影響您的文本。你可以發佈你的實際HTML以及任何應用於DIV的CSS嗎？ – drudge 2011-02-11 23:06:52

好的，編輯問題包括完整的HTML（簡稱）。 – hpy 2011-02-11 23:18:18

查看我的更新回答.... – jeroen 2011-02-11 23:44:43

您的html和css工作 ~~因此，您的css文件中必定存在導致它不被使用的錯別字~~ 。

一切正常，因爲它應該。您的問題是，框的填充位於左浮動導航欄的後面，儘管部分隱藏在底部導航欄的後面，但您的框確實是100％寬。

您也可以通過將.content_bottom容器左側浮動來解決問題。

您將需要對邊框進行一些額外的更改，但是您可以在頂部部分執行此操作，以便您只有一個水平邊框而不是2個相同顏色的邊框。

See here for a working example。

來源

2011-02-11 23:36:32 jeroen

填充：5px的;

或padding-top：5px;只爲頂部

來源

2011-02-11 23:07:07

padding：5px;隻影響頂部和底部，仍然無法獲得左側或右側填充... – hpy 2011-02-11 23:16:32

這聽起來像你遇到崩潰的邊界。嘗試邊框摺疊：分開。

來源

2011-02-11 23:08:23 David

感謝您的提示，但這似乎沒有做任何事情...... – hpy 2011-02-11 23:15:59

border-collapse的混合：separate and padding：10px;應該爲你做這個把戲。發佈一些代碼以獲得更詳細的解釋。在各方面

來源

2011-02-11 23:10:56 DanielCW

10px的填充

padding:10px;

0像素填充，右邊頂部/底部和10px的填充/左

padding:0px 10px;

爲雙方的組合，你可以做到這一點

padding-right:10px; 
padding-left:10px; 
padding-top:10px; 
padding-bottom:10px

您還可以使用以下快捷方式使頂部/底部具有不同的值，同時保持右/左sa我

padding: 20px 10px 30px;

現在你知道他們所知道的一切有關填充。

來源

2011-02-11 23:15:05 Hussein

如何通過CSS在/ div容器中添加填充空間？

回答

相關問題