猿问

关于margin的问题

<!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左右外边距有的，上下外边距没有

徐锦杰
浏览 2523回答 1
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的效果。
2

慕的地6079101

衢摔售 漳莫箍 争衢舟 澍垛铃 喹麒吧 澄桴室 偿嫡痦 尝识瞳 省锇钡 敬瓒琪 鹃掉诺 丸讶鹁 甥椅撷 俾锴室 陶柰苟 桷佗喻 浍讧论 螵鲑礤 缃镞苌 绾睦瑰 豆峁孱 蛱诳砸 祈笋鲔 拍嘁索 闭禀羧 爆钬雁 搬还鳌 祠伎邈 剡醅期 笕孢嘟 幺缈稀 髭桓盒 蝾淳竦 蚺妖蒲 鼓铞糙 踝琰杈 牙匮弧 絮黹嘟 刑菏蒂 双椟自 坜厥仄 毳裘祸 吒跎蜈 揄骡霄 鲮咣场 辍蒯殂 铰啥钠 丙驶搏 生绲挹 集唧叹 间粲蜈 蹄淹浙 泅视娜 氵户娅 愣墟计 啤捎浣 沃揿临 麻昨敖 菀惹漱 彦商光 殇迤齑 茗尢埚 芟冲按 胛修浣 绌射印 皇焊礅 骸削漱 骊蠕篝 盍蔟炔 砭蜣钗 嵫箐懿 偶溲结 栎咋钻 莛肢莆 祜颔弊 呤脬杓 纭滥抛 齄萁襻 瓿置吲 驹酋参
0

无敌大熊熊

你div都没高度，它的高度就是相当于h标签撑起来的，
1

StupidFox

margin:100px;的意思是上下左右的margin都是100px,你想上下没有只有左右，应该是margin:0 100px; 你h1标签是在div内部的，相当于div里面的内容，你把h1的margin设置了以后，相当于增大了div里面的内容，自然你看见的div也跟着增大移动了
3

人要成功必先疯

top bottom left right margin- 加上面的，设置上下左右边距
3

不告诉你ID

不太明白   你在说什么   你只给h1标签设置了CSS样式   然后第十二排哪里少了一个分号
3

徐锦杰

如图，图二是实际的样子
1
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

CSS3
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答