常見的 css 問題

時間 2019-11-18

標籤常見的 css 問題欄目 CSS 简体版

原文原文鏈接

###一、空白邊疊加問題this

<body>
    <div class="box">
        <p>this pragraph has a 20px margin</p>
    </div>
</body>

.box{margin: 10px; background: #d5d5d5; width: 300px;}
p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

咱們的本意是讓 box 顯示10像素的空白邊，段落顯示20像素的空白邊spa

可是實際效果如圖：code

這裏發生了兩個狀況：圖片

1.段落的20px 空白邊和 div 的10px 空白邊疊加，造成一個單一的20px 垂直空白邊。it

2.這些空白邊不是被 div 包圍的，而是突出到 div 的頂部和底部的外邊。class

出現這種狀況是因爲具備塊級子元素的元素計算其高度的方式形成的。（若是元素沒有垂直邊框或填充，那麼他的高度就是它包含的子元素的頂部和底部邊框邊緣之間的距離。所以，包含的子元素的頂部和底部空白邊突出到容器元素的外邊。）容器

解決辦法：經過添加一個垂直邊框或者填充，空白邊就再也不疊加了，並且元素的高度就是它包含的子元素的頂部和底部空白邊緣之間的距離。方法

方法一：im

.box{margin: 10px; background: #d5d5d5; width: 300px; **padding: 1px;**}
 p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

方法二：margin

.box{margin: 10px; background: #d5d5d5; width: 300px; border: 1px solid transparent;}
p{margin: 20px; background: #6699FF; border:1px solid #e33030;}

空白邊疊加的很少數問題能夠經過添加透明的邊框或1px 的填充來修復

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。