【memo】你阿罵的margin 特性2:float【css】

該死的margin

※這是關於css樣式的文章,您的瀏覽器必須支援或開啟css樣式※

回顧:TrntH: 【memo】你阿罵的margin 特性【css】

上次提到margin在上下的空隙問題,這個情況在配合float又有特殊的情況;子元素的margin是以上下block的元素為基準,連帶的使父元素下推,父元素與伯元素之間有空隙;左右則依據父元素的左右推。父元素背景是紅色的

div:伯
div margin:20px:長子
span 次子

解決方法:HTML

在子元素前後加入元素

div:伯
span 長子
div margin:20px:次子
span 三郎

解決方法:CSS

運用:before,:after將父元素撐開,但是ie7含以下不支援,

#beforeAfterExample .main:before ,#beforeAfterExample .main:after{
 content:" ";
 display:block;
 clear:both;
 height:1px;
}
div:伯
span 長子
div margin:20px:次子
span 三郎

父元素為float

但若父元素為float,則子元素的margin可以將父元素撐開,使的父與伯之間沒有空隙

div:伯
div margin:20px:長子
span 次子

綜合,其他案例:

div:伯
margin:20px:子
float:left;margin:10px;:父
margin:20px:子
float:none;margin:10px:父

留言