<!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条经验 获得超1个赞
margin-top在不同浏览器中的表现是不一样的，很多朋友会发现有一些小区别了，下面我们来看一篇关于css父元素与子元素之间的margin-top问题分析与解决办法整理。
父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。
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、为父元素或者子元素声明绝对定位
在某些浏览器中，当给层内元素设置margin-top时，层内元素并没有margin，而是父层出现了margin-top，这往往让人很费解吧。。
解决办法有：
1.给父层添加：overflow:hidden;
2.给父层添加：border除none以外的属性
3.给父层添加：padding-top代替margin-top的效果。
慕的地6079101
TA贡献3593条经验 获得超0个赞
衢摔售
漳莫箍
争衢舟
澍垛铃
喹麒吧
澄桴室
偿嫡痦
尝识瞳
省锇钡
敬瓒琪
鹃掉诺
丸讶鹁
甥椅撷
俾锴室
陶柰苟
桷佗喻
浍讧论
螵鲑礤
缃镞苌
绾睦瑰
豆峁孱
蛱诳砸
祈笋鲔
拍嘁索
闭禀羧
爆钬雁
搬还鳌
祠伎邈
剡醅期
笕孢嘟
幺缈稀
髭桓盒
蝾淳竦
蚺妖蒲
鼓铞糙
踝琰杈
牙匮弧
絮黹嘟
刑菏蒂
双椟自
坜厥仄
毳裘祸
吒跎蜈
揄骡霄
鲮咣场
辍蒯殂
铰啥钠
丙驶搏
生绲挹
集唧叹
间粲蜈
蹄淹浙
泅视娜
氵户娅
愣墟计
啤捎浣
沃揿临
麻昨敖
菀惹漱
彦商光
殇迤齑
茗尢埚
芟冲按
胛修浣
绌射印
皇焊礅
骸削漱
骊蠕篝
盍蔟炔
砭蜣钗
嵫箐懿
偶溲结
栎咋钻
莛肢莆
祜颔弊
呤脬杓
纭滥抛
齄萁襻
瓿置吲
驹酋参
StupidFox
TA贡献4条经验 获得超2个赞
margin:100px;的意思是上下左右的margin都是100px,你想上下没有只有左右，应该是margin:0 100px;
你h1标签是在div内部的，相当于div里面的内容，你把h1的margin设置了以后，相当于增大了div里面的内容，自然你看见的div也跟着增大移动了
- 1 回答
- 0 关注
- 2249 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消