48

デフォルトで、ボックスの幅と高さにすべてのコンテンツ、パディング、境界線の幅、マージンを含める必要があります。これを行う方法はありますか？width: 100%特に余白まで含めて指定できるようにしたいです。

4

5 に答える 5

29

漠然とした質問ですが、分かる範囲でお答えします。

マージンは、定義上、ボックスの外側の領域です。つまり、div 内にマージンを含める方法はありません。

ボックスの内側にパディングを追加したいが、ボックスのサイズを変更したくない場合は、次を使用します。または、パディングと境界線box-sizing:content-box;
を含めたい場合は、次を使用します。box-sizing:border-box;

div のサイズを維持し、オーバーフローを削除する実行可能なソリューションは、次のようになります。

#parent{
    box-sizing:border-box;
    width:100%;
    height:200px;
    padding:2em;
}
#child{
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:1em;
}

<div id="parent">
   <div id="child"></div>
</div>

余白を付けたい div を、パディングのある別の div の中に配置するだけです。したがって、偽のマージンを作成します。

于 2014-11-12T21:33:56.953 に答える
0

display: flex;親タグに使用します。

例えば：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  display: flex;   /* it can put children in one line */
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
  box-sizing: border-box
}

.right {
  border: 1px solid black;
  width: 80%;
  margin: 0 10px;
  float: left;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

于 2016-03-13T15:29:44.183 に答える