1

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;
}

お時間をいただきありがとうございます。

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

ボックスモデルは、アイテムに追加するパディングとボーダーの幅だけアイテムの幅を減らす必要があると述べています。

したがって、あなたの場合、幅を160pxにするとうまくいきます。

詳細はこちら:

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

于 2012-09-14T10:48:56.910 に答える
0

ボーダー パディング コンテンツ

幅はコンテンツのプロパティであるため、パディングは要素の合計幅に px を追加します

于 2012-09-14T10:51:19.927 に答える