爲什麼CSS填充增加了元素的大小？

我想給我的div和textarea一些填充。當我這樣做時，它會增加元素的大小，而不是縮小其內容區域。有什麼辦法可以實現我想要做的事情嗎？爲什麼CSS填充增加了元素的大小？

感謝您的幫助！

2011-01-22 Michael

什麼瀏覽器（S）您使用的測試增加嗎？ – 2011-01-22 09:03:17

+19

將`* {box-sizing：border-box;}`添加到您的樣式表中，並且大小將按照您的預期行事。 Paul Irish確認它對所有現代瀏覽器都是安全的：http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – 2013-08-20 18:23:08

這取決於瀏覽器和它的實現box model。你正在經歷的是正確的行爲。

IE傳統答錯：http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

來源

2011-01-22 09:03:48 cherouvim

+11

「錯誤」與W3C提出的不同，但遠遠不夠因爲更直觀/更容易工作。 – pbz 2011-03-15 04:34:27

根據CSS2 specs，箱式元件的呈現寬度等於其寬度的總和，左/右邊緣和左/右填充（左/右邊緣也發揮作用）。如果您的框的寬度爲「100％」並且具有邊距，邊框和填充，則它們會影響（增加）該對象佔用的寬度。

因此，如果您的textarea需要100％寬，請將值分配給width，margin-left/right，border-left/right和padding-left/right，以使它們的總和等於100％。

在CSS3中我們有three box-sizing models。可以使用border-box模型：

指定的寬度和高度（和相應的最小/最大屬性）上該元素確定該元件的邊界框。也就是說，在元素上指定的任何填充或邊框都會在此指定的寬度和高度內佈置並繪製爲。內容寬度和高度是通過從指定的「寬度」和「高度」屬性中減去各邊的邊框和填充寬度來計算的。

來源

2011-01-22 09:07:53

這是W3C部分的混亂，各種瀏覽器只是增加了他們自己版本的盒子模型的複雜性。就個人而言，而不是思考哪個瀏覽器或CSS設置會做的伎倆我只是包裝中還沒有對DIV的另一個DIV聲明和使用利潤率盒子」的內容，而不是使用填充，像這樣：

<div id="container" style="width: 300px; border: 10px solid red;"> 
    <div id="content" style="width: 250px; margin: 25px;"> 
     Some content 
    </div> 
</div>

雖然這隻適用於固定尺寸的容器

來源

2012-05-19 03:28:41 techexpert

您可以將box-sizing:border-box添加到容器元素，以便能夠指定在向元素添加填充和/或邊框時不會改變的寬度和高度。

查看here (MDN)的規格。

更新（複製評論接聽）

眼下，價值border-box所有主流瀏覽器支持，根據MDN Specs

當然有些瀏覽器需要適當的前綴，即-webkit和-moz，你可以清楚地看到here

來源

2013-08-20 13:15:12

對於更多的跨瀏覽器解決方案，就可以避免這種情況，通過包裝，需要填充到固定寬度的另一個標記任何標記，並給予它的寬度：汽車。這樣，如果父項的寬度爲x，並且向子項添加填充，則子項將繼承x的全部寬度，正確應用填充而不修改父寬度或它自己的寬度。

來源

2013-12-22 13:41:43 man

一個格默認情況下需要它的父容器的寬度，這樣可避免瀏覽器兼容性問題，你可以在指定的DIV添加孩子的div然後添加需要的填充到孩子DIV 。

N.B - 不指定寬度孩子DIV因爲它會如果添加填充

來源

2017-10-03 14:19:43 Tobi

爲什麼CSS填充增加了元素的大小？

回答

相關問題