CSSの内側の境界、壊れたレイアウト

Question

私は多くのdivで画面を分割していますので、それらはお互いに張り付いています（チェス盤のようなものですが、可変サイズのフィールドがあります）。私はheigthとwidthをパーセンテージ（親コンテナと比較して）を使って設定しました。私はすべてのレイアウト区切り、div要素にborder: 1pxを追加するとき

は今、...私は境界が各側に1ピクセルを追加し、解決策はいくつか内部境界線を追加するだろうと想像してみてください。どういうわけかそのような内部ボーダーを追加できますか？

Answer 1

box-sizing: border-boxを使用すると、要素のwidthのボーダーの幅の部分を作ることができます。

.example { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

Browser support.

Answer 2

アウトラインプロパティを使用します。国境声明とは異なり、要素の高さや幅に「追加」しません。しかし、国境のpropeertyとは異なり、左、右、下、または左の個々のプロパティを持つことはできません。 outline-style、outline-widthおよびoutline-colorのプロパティを持つことはできますが、

Outline Refrence

Answer 3

あなたは彼らに49.5% EDITを作る0.5によって割合を減らすことができます：最初は動作しませんあなたが親のdivと多くの子divを持っている場合、

Answer 4

@thirtyおかげで、言ってみましょう。高さと幅をパーセンテージで設定すると、それらは互いに固執します。その後、border:1pxを追加すると、その幅が以前よりも長くなります。これを解決するには、幅の変更を防ぐためにanother div after the parent divが必要です。