CSS內邊框，破碎布局

我已經分成了許多div屏幕，使他們堅持一個彼此（讓說，像棋盤，但具有可變大小的字段）。我使用百分比（相對於父容器）設置了heigth和width。CSS內邊框，破碎布局

現在，當我添加border: 1px到的div，所有的佈局休息......我想象的邊界增加了1px的每一方，以及解決辦法是增加一些內部邊界。我可以添加某種方式這樣的內部邊界？

2011-07-19 Jakub M.

您可以使用box-sizing: border-box使元素的width的邊框的寬度一部分。

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

2011-07-19 16:46:11 thirtydot

/*您忘記-MS用於IE */ \t \t \t -moz-箱尺寸：邊界盒; -webkit-box-sizing：border-box; -ms-box-sizing：border-box; box-sizing：border-box; –

@EmilioYero：不，我沒有。在我的答案結尾處查看「瀏覽器支持」鏈接。 IE7根本不支持它，而IE8和更高版本支持它，沒有供應商前綴。 – thirtydot

使用outline屬性。與邊框屬性不同，它不會「添加」到元素的高度或寬度。然而，不像邊界荒野，你不可能有左邊，右邊，底部或左邊的各個屬性。雖然可以具有輪廓樣式，輪廓寬度和輪廓顏色屬性。

2011-07-19 16:43:55 Jawad

它是如何在所有瀏覽器的工作，雖然？ – Phil

@Phil：我不確定，但我認爲即使在傳統瀏覽器中，outline屬性也得到很好的支持。我有待糾正。 – Jawad

瀏覽器支持：http://reference.sitepoint.com/css/outline#compatibilitysection – thirtydot

您可以通過0.5減少百分比使他們49.5%編輯：首先聲明將無法正常工作，謝謝@thirty

2011-07-19 16:44:41 Phil

'outset'不會改變任何東西。 – thirtydot

讓我們說，如果你有一個父DIV和許多孩子的div。當您將高度和寬度設置爲百分比時，您會讓它們彼此粘在一起。然後當添加border:1px時，它們的寬度將變得比以前更長。要解決這個問題，我想說你應該有another div after the parent div來防止調整寬度。

2011-07-19 16:46:09

我不知道這將如何解決問題！ – Jawad

@Jawad：嘗試刪除這兩個'padding'和'margin'那就包裝所有的孩子Div組合在一起。 –

回答