1

我试图将我的 div 的宽度固定为 200px。但是当我将 20px 添加到 padding 时，div 被拉伸到 240px 宽度。这是 HTML5 的一些怪癖还是我做错了什么？

这是我的 HTML：

<!DOCTYPE HTML>
<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>My website</title>
     <link rel="stylesheet" type="text/css" media="all" href="style.css" />
  </head>
  <body>
    <div id="wrapper">
    Hello world
    </div>
  </body>
</html>

这是我的CSS：

#wrapper {
  width: 200px;
  padding: 20px;
}

感谢您的时间。

4

3 回答 3

4

这是一个盒子模型的东西：这篇文章有一些非常好的 CSS3 技巧来改变盒子模型。本质上，您可以将 DIV 定义更改为：

#wrapper {
    width: 200px;
    padding: 20px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

示例 jsFiddle

于 2012-09-14T11:06:48.257 回答
0

边框填充内容

width 它是内容的属性，因此填充会将 px 添加到元素的总宽度

于 2012-09-14T10:51:19.927 回答
0

盒子模型指出，您应该将项目的宽度减小为添加到它的任何填充和边框的宽度。

所以在你的情况下，让你的宽度为 160px，你会很好。

更多信息在这里：

http://www.w3schools.com/css/css_boxmodel.asp

于 2012-09-14T10:48:56.910 回答