关于CSS样式的一个问题

写了一个导航栏,
一个div包含一个ul

css样式如下:
ul {margin:0; padding:0;}

.daohangdiv{
border:1px #000 solid;
margin:10px auto;
width:1000px;
height:50px;
position:relative;
text-align: center;

}
.daohangul{
list-style: none;
margin:10px auto;
}
.daohangul li{
border-left:1px solid #000;
display:inline;
padding-left:10px;
padding-right: 10px;
}
图片说明

当我突然把div的border去掉之后
图片说明

于是我修改了ul中margin的值,无论怎么修改,都修改不了ul在div中的位置,他只会让div移动。
ul修改margin不是相对包含他的div移动么,为什么它是相对上面的div移动?
图片说明

求解,谢谢!!!

css

2个回答

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

通俗讲就是子元素的margin-top会影响父元素。

解决办法:
1、可以改为父元素用padding-top值。
2、父元素设置 overflow:hidden;(我比较常用)
3、父元素或者子元素声明浮动(float:left;可用)
4、父元素添加border(border:1px solid transparent可用)
5、父元素或者子元素声明绝对定位

qq_34086980
Armouy 懂了!!改了之后确实是这个问题,谢谢!!!
2 年多之前 回复

看不到你页面对应的html代码是不好说明的,你看看是不是你那张图片的DIV太高了

qq_34086980
Armouy 这个不会,因为每次写div都会先写border确定一下大小 ,改好了再删掉border,谢谢
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!