<!DOCTYPE?html>
<html>
<head>
<title>AAA</title>
<style?type="text/css">
div{
width:?800px;
margin:?0?auto;
background-color:?#ccc;
}
h1{
margin:?100px
border:1px?solid?red;
}
</style>
</head>
<body>
<div><h1>AAAAAAAAAAAAAA</h1></div>
</body>
</html>我給h3設置margin，為什么div跟著h3往下移動了?h3左右外邊距有的，上下外邊距沒有
1 回答
徐錦杰
TA貢獻6條經(jīng)驗 獲得超1個贊
margin-top在不同瀏覽器中的表現(xiàn)是不一樣的，很多朋友會發(fā)現(xiàn)有一些小區(qū)別了，下面我們來看一篇關于css父元素與子元素之間的margin-top問題分析與解決辦法整理。
父元素的盒子包含一個子元素盒子，給子元素盒子一個垂直外邊距margin-top,父元素盒子也會往下走margin-top的值，而子元素和父元素的邊距則沒有發(fā)生變化。?
?
html代碼：
<div class="box1">?
<div class="box2"></div>?
</div>
css樣式：
.box1{height:200px;width:200px;background:gray;}?
.box2{height:100px;width:100px;background:gold;margin-top:50px;}
解決方法：
1、修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；常用）?
2、為父元素添加overflow：hidden；樣式即可（完美）?
3、為父元素或者子元素聲明浮動（float：left；可用）?
4、為父元素添加border（border:1px solid transparent可用）?
5、為父元素或者子元素聲明絕對定位
在某些瀏覽器中，當給層內(nèi)元素設置margin-top時，層內(nèi)元素并沒有margin，而是父層出現(xiàn)了margin-top，這往往讓人很費解吧。。
解決辦法有：
1.給父層添加：overflow:hidden;
2.給父層添加：border除none以外的屬性
3.給父層添加：padding-top代替margin-top的效果。
慕的地6079101
TA貢獻3593條經(jīng)驗 獲得超0個贊
衢摔售
漳莫箍
爭衢舟
澍垛鈴
喹麒吧
澄桴室
償?shù)震?/a>
嘗識瞳
省鋨鋇
敬瓚琪
鵑掉諾
丸訝鵓
甥椅擷
俾鍇室
陶柰茍
桷佗喻
澮訌論
螵鮭礤
緗鏃萇
綰睦瑰
豆峁孱
蛺誑砸
祈筍鮪
拍嘁索
閉稟羧
爆鈥雁
搬還鰲
祠伎邈
剡醅期
筧孢嘟
幺緲稀
髭桓盒
蠑淳竦
蚺妖蒲
鼓铞糙
踝琰杈
牙匱弧
絮黹嘟
刑菏蒂
雙櫝自
壢厥仄
毳裘禍
吒跎蜈
揄騾霄
鯪咣場
輟蒯殂
鉸啥鈉
丙駛搏
生緄挹
集唧嘆
間粲蜈
蹄淹浙
泅視娜
氵戶婭
愣墟計
啤捎浣
沃撳臨
麻昨敖
菀惹漱
彥商光
殤迤齏
茗尢堝
芟沖按
胛修浣
絀射印
皇焊礅
骸削漱
驪蠕篝
盍蔟炔
砭蜣釵
嵫箐懿
偶溲結
櫟咋鉆
莛肢莆
祜頷弊
呤脬杓
紜濫拋
齄萁襻
瓿置吲
駒酋參
添加回答
舉報
0/150
提交
取消