在不改變總寬度的情況下添加填充

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

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

2013-03-13 user2119834

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

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+ */ 
}

來源

2013-03-13 10:47:48

使用盒大小，它使填充包括： 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?

來源

2013-03-13 10:48:02 InsomniaBass

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

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

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

每次你添加填充到塊級元素，這個元素的變化寬度。這個問題有很多解決方案。我通常將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; 
}

這是任何瀏覽器

來源

2013-03-13 11:19:24 AlexN

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

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

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

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

b.r.

來源

2015-02-23 00:11:58 siudek

在不改變總寬度的情況下添加填充

回答

相關問題