0

私は常にパディングとマージンで台無しにするので、あらゆる種類のグリッドシステムを使用することを避けてきました。

グリッドが 90px で、次のコードがあるとしましょう。

//HTML
<div class="col1">
 <div class="content">
   Hello world
 </div>
</div>

//CSS
.col1 { width: 90px; margin: 0px; padding: 0px; background-color: #444; }
.content { margin: 20px; color: #fff; background-color: #0087d5; width: 100%; }

ここで JSfiddle。

グリッドを操作するにはどうすればよいですか?

そこに多くのグリッドシステムがあることを知っており、いくつかをテストしましたが、スペースを確保するためにパディングを使用し始めるとグリッドが常に拡張するため、これを間違った方法で「攻撃」しているに違いありません。

4

1 に答える 1

2

を適用する必要がbox-sizingあります。これは、幅を計算するときにパディングを考慮します (つまり、パディングの90px+は、 の合計幅を作成するのではなく、内側10pxにパディングを適用します。さらに安全にしたい場合は、これをリセットまたは正規化スタイルシートに追加します。110px

* { box-sizing: border-box }

古いバージョンの Safari および Firefox の場合:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box }

ワイルドカード セレクターを使用すると、box-sizingプロパティをすべての要素に適用できます。これは、 Skeletonなどの一部のグリッド システムに含まれていることを知っています。

于 2013-06-13T12:47:23.347 に答える