Question

我试图将div的宽度固定为200px。但是当我向填充添加20px时，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;
}

感谢您的时间。

Answer 1

这是一个盒子模型的东西：this article有一些非常好的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+ */
}

Example jsFiddle

Answer 2

框模型声明您应该将项目的宽度减去您添加到其中的任何填充和边框的宽度。

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

更多信息：

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

Answer 3

边界填充含量

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

填充拉伸div宽度HTML5

3 个答案: