2013-03-13 87 views
15

如何在不添加預定義寬度的前提下將填充添加到元素?在不改變總寬度的情況下添加填充

這是很好的定義列的寬度,使佈局清晰的網格;但也想添加填充到列內的內容。任何方式來指定?

+0

我認爲利潤率增加了預定義的寬度和填充頂部沒有... – Jace 2013-03-13 10:47:18

回答

24
element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 
9

使用盒大小,它使填充包括: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

例子:

div { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; /* Firefox */ 
    -webkit-box-sizing:border-box; /* Safari */ 
} 

值得一提的是這不會對IE7工作。

對於IE8,請參見上面的回答這個問題:box-sizing: border-box => for IE8?

+0

w3schools是一個可怕的資源。使用MDN。 – 2013-03-13 10:55:39

+0

@JanDvorak好吧,道歉,但我沒有意識到。用MDN編輯。 很遺憾,看到一個答案純粹取決於鏈接的選擇,而不是內容本身。 – InsomniaBass 2013-03-13 10:58:47

+1

對於瀏覽和閱讀的人來說,我查找了w3schools的信息,並發現:http://w3fools.com - 強烈推薦閱讀它,因爲它解釋了Jan Dvorak的說法。 – InsomniaBass 2013-03-13 11:06:48

3

每次你添加填充到塊級元素,這個元素的變化寬度。這個問題有很多解決方案。我通常將margin設置爲第一個子元素,併爲此元素設置width: 100%

例如,我們有:

<div id="main"> 
    <div id="child"> 
     This is content with margin 
    </div> 
</div> 

這些元素的CSS樣式:

#main { 
    border: solid 1px red; 
    float: left; 
    width: 5em; 
} 

#child { 
    border: solid 1px blue; 
    float: left; 
    width: 100%; 
    margin: 0.5em; 
} 

這是任何瀏覽器

+0

這確實是W3C團隊在設計佈局模型時所考慮的解決方案。事實上,我從來沒有使用過箱子的尺寸。 – 2013-03-13 11:31:04

+0

+1,用於使用基本CSS的直接解決方案。 – lintmouse 2014-11-03 23:01:08

0

這是一個古老的線程,我知道解決辦法。但上次我有一個完整的黑洞來製作一個沒有設置寬度和填充的DIV,所以它不會炸燬我的3列行和CSS2。所以我把一個DIV放在左邊,右邊放着一個沒有浮動和沒有固定寬度的DIV,但我想填充它。那怎麼樣...

我放棄了。 :D但是我把一個內部的DIV放在中央,並給它寬度= 90%。到目前爲止,這是一個非常簡單但不是很好的解決方案,但有時它有助於實現您所需要的外觀。 ;]

b.r.

相關問題