Question

我正在使用CSS创建一个包含页眉和页脚的3列页面布局。以Left_Col div为例，其宽度为200px。我希望这个div有一个10px的左右填充，这样Left_Col中的文本基本上从像素10开始，并包裹在像素190处。

在下面的例子中，为了实现这一点，我在Left_COL div中创建另一个NEST DIV并将边距设置为StdMargin（10px）。这是有效的，但我想到另一种方法来实现相同的结果，即放弃内部的“stdMargin”内部div并在Let_Col div上添加“padding 10px”属性。但是，我很失望，这似乎增加了LEFT_COL div的宽度超出其定义的200px宽度，从而与中间CONTENT div重叠，这不是我想要的。

为什么会这样？有没有办法避免嵌套的内部div？太多的嵌套对象，我开始看到交叉的眼睛...

这是我的css页面：

/* CSS layout */
body {
 /*
 margin: 0;
 padding: 0;
 */
 margin: 0 auto; 
 width: 1000px; 
}

#masthead {
background-color:aqua;
}

#top_nav {
background-color:Yellow;
}

#container {
 background-color:maroon;

}

#left_col {
 width: 200px;
 float: left;
 background-color:#99FF33;
}

#page_content {
 margin-left: 200px;
 margin-right: 200px;
 background-color:#99CCFF;
}


#right_col {
 width: 200px;
 float: right;
 background-color:#F1E2E0;
}


#footer {
 clear: both;
 background-color:#BBBBFF;
}

.stdmargins{
 margin:5px;
}

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<title>masthead</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="3Column.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="PageWidth">

<div id="masthead">
 </div>
<div id="top_nav">
 <div class="stdmargins">
  Top Nav</div>
 </div>
<div id="container">Container
 <div id="left_col">
  <div class="stdmargins">
   Left Column Top<br />
   <br />
   <br />
   <br />
  <br />
  <br />
  <br />
  <br />
  <br />
   Left Col bottom<br />
 </div>
 </div>
 <div id="right_col">
 <div class="stdmargins">
  Right top<br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  Right bott<br />
 </div>
 </div>
 <div id="page_content">
  <div class="stdmargins">
  </div>
 </div>
</div>
<div id="footer">
 Footer</div>

</div>

</body>

</html>

Answer 1

从宽度中减去填充。因此，如果您希望div最终为200px宽，那就是：

padding: 10px;
width: 180px; /* 200 - 10 - 10 */

此图表非常有用：http://www.w3.org/TR/CSS21/box.html#box-dimensions

Answer 2

根据CSS Box Model规范，应用了填充的元素的默认行为是增加其宽度和高度。也就是说，您将始终担心元素的尺寸，并根据您应用的左右填充量减少宽度。例如：如果你有一个200px和padding 10px的div，则总width将是220px。

但是，您可以通过设置“box-sizing”CSS3规则来更改此行为，该规则使您的元素不总结填充到最终宽度/高度。您可以查看有关主题的mozilla页面：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。

但请注意：例如，它在 IE 7 等旧浏览器中不起作用。如果向后兼容性对你来说不是问题，那就直接去吧。

有一种解决方法，如果你不想从填充宽度中减去列的宽度/高度：你可以在其中创建一个包装div并将填充应用于它或将填充附加到内部元素，而不是父div本身。

<div id="column" style="width: 200px">
    <ul style="padding: 10px">
        <li>Some text</li>
        <li>Some more text</li>
        <li>Even more text</li>
    </ul>
</div>

这样，您就不必担心在需要更改填充大小时重新计算元素尺寸，例如。

CSS HTML Margin和Padding属性

2 个答案: