初學網頁建設問題:如何通過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;
}
填充絕對應該影響您的文本。你可以發佈你的實際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