CSS HTML 边距和填充属性答案

【问题标题】：CSS HTML Margin and Padding propertyCSS HTML 边距和填充属性
【发布时间】：2010-12-20 18:31:27
【问题描述】：

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

在下面的示例中，为了实现这一点，我在 Left_COL div 中创建了另一个 NEST DIV，并将边距设置为 StdMargin (10px)。这可行，但我想到了另一种实现相同结果的替代方法，即放弃内部“stdMargin”内部 div 并在 Let_Col div 上添加“填充 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>

【问题讨论】：

标签： html css

【解决方案1】：

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

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

这张图很有帮助：http://www.w3.org/TR/CSS21/box.html#box-dimensions

【讨论】：

【解决方案2】：

根据 CSS 盒子模型规范，应用了填充的元素的默认行为是增加其宽度和高度。也就是说，您总是需要担心元素的尺寸并根据您应用的左右填充量来减小宽度。例如：如果您的 div 包含 200px 和 padding 的 10px，则 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>

这样，当您需要更改内边距大小时，您无需担心重新计算元素尺寸。

【讨论】：