CSS中的內外間距合并是一個常見的現象,當父級元素和子級元素都有設定內外間距時,會出現多種情況。
首先,當父級元素和子級元素的內外間距都設為0時,它們之間的間距不會疊加,顯示為0。
.parent {
margin: 0;
padding: 0;
}
.child {
margin: 0;
padding: 0;
}
接著,當父級元素和子級元素的內外間距都設為非0值時,它們之間的間距會疊加,子級元素的內外間距會加上父級元素的外間距。
.parent {
margin: 20px;
padding: 10px;
}
.child {
margin: 10px;
padding: 5px;
}
然而,當父級元素的內間距不為0,而子級元素的外間距為負值時,它們之間的間距會取子級元素的外間距的絕對值和父級元素內間距的較大值。
.parent {
padding: 10px;
}
.child {
margin-top: -10px;
}
最后,當父級元素的外間距為0,而子級元素的外間距為非0值時,它們之間的間距會取子級元素的外間距和父級元素的內間距的總和。
.parent {
margin: 0;
padding: 10px;
}
.child {
margin: 20px;
}
總之,了解CSS中內外間距合并的規律,可以更好地控制頁面的布局效果。
上一篇mysql的分析函數
下一篇css 關閉橫向