爲什麼添加一些填充會影響DIV框外的元素?填充不應該在DIV的邊框和內部的之間創建一些空格嗎?如何在不影響DIv框外的元素的情況下創建這個空間?DIV內的填充
Q
DIV內的填充
0
A
回答
6
如何在不影響 DIv框外的元素的情況下創建此空間?
使用box-sizing: border-box
從MDN:
邊界框 width和height屬性包括padding和 邊界,而不是利潤率。
該屬性必須設置的原因是因爲默認box-sizing
的值是content-box
。再次來自MDN:
content-box這是CSS標準指定的默認樣式。測量寬度和高度屬性僅包含 的內容,但不包括填充,邊框或邊距。
1
假設你已經指定了一個內容height
或width
,然後padding
將被放置周圍這一點。這將邊界向外移動。這向外移動邊距。這將推動附近的元素。
您可以通過減少height
和/或width
補償或使用box-sizing
屬性,以使height
和width
確定的邊界,而不是內容的外邊緣的外邊緣之間的距離改變它。
1
嘗試尋找到box-sizing
財產...
https://css-tricks.com/box-sizing/
今天,所有的瀏覽器的最新版本使用原來的「寬度或高度 +填充+邊框=實際寬度或高度」盒模型。使用 box-sizing:border-box ;,我們可以將box模型更改爲原來的 「古怪」的方式,其中元素的指定寬度和高度不是由填充或邊框影響的 。這在 響應式設計中被證明非常有用,它被發現進入重置樣式。
你後的值是border-box
:
.class {
box-sizing: border-box;
}
相關問題
- 1. 保持div內的填充
- 2. 內容填充問題div
- 3. div內額外填充
- 4. 用內容填充Div
- 5. DIV內圖像的填充/邊距
- 6. 的DIV內部沒有填充問題
- 7. 填充在div塊內不可見?
- 8. 使內容div填充剩餘高度
- 9. 如何在div中填充內容
- 10. 用JavaScript改變svg填充內div
- 11. 子div不填充div
- 12. 展開內容填充DIV,同時「停留」在div內 - vaadin 7
- 13. div內的div CSS樣式 - 使用填充來居中內部div的外部?
- 14. 填充DIV容器
- 15. Div填充高度
- 16. 填充DIV高度
- 17. 將div的內容自動填充到隱藏溢出div
- 18. 兩個div內的一個div響應填充
- 19. div內透明填充的另一個div
- 20. 用另一個div的溢出內容填充div
- 21. 填充div的空格
- 22. 填充內EditText
- 23. Div填充父div的高度?
- 24. Div的堆棧和填充父DIV
- 25. 將div元素垂直填充到父div內容
- 26. 使用外部內容填充div和子div元素
- 27. 相對定位div內絕對div不填充父容器
- 28. wicket 1.5用另一個div動態地填充div內容
- 29. 獲取內部div適應外部div寬度與填充
- 30. 如何使用永久大小填充img動態填充內部div?