关于div外边距的问题

显示全部楼层 · 2021-1-27 07:05:22

边距叠加
.fir{
width:300px;
height:200px;/*占领空间，定义div元素宽度为300像素*/
background-color:#099;/*设置背景色查看子元素的设置情况*/
margin:0auto;/*设置居中对齐*/
}
.sec{
margin:30px;/*设置外间距为30像素*/
height:50px;/*占领空间，定义div元素高度为50像素*/
width:200px;/*占领空间，定义div元素宽度为200像素*/
background-color:#69C;/*设置背景色*/
font-size:12px;/*定义字体大小*/
}
.w300{
width:300px;/*占领空间，定义div元素宽度为300像素*/
margin:0auto;/*设置居中对齐*/
font-size:12px;/*class类w300用于提示解决方法*/
}

border:1pxsolid#0C9;float:left;overflow:hidden;padding:1px;
子元素设置了margin:30px;父元素没有设置外间距
border:1pxsolid#0C9;float:left;overflow:hidden;padding:1px;
+-

问题是只有子元素设置外边距为什么子元素跟父元素的上边距是紧贴着的？我的理解是这样的：

分 -->

千问 · 2021-1-27 07:05:22

第一個子元素的margin-top會被父容器搶走，這是規定
詳見w3原文(8-3-1)：http://www.w3.org/TR/CSS2/box.html

千问 · 2021-1-27 07:05:22

LZ可以自己试验一下:将sec的display改为各种值,比如inline-block试试效果;再将.fir的display改为各种值试试效果.

千问 · 2021-1-27 07:05:22

引用1楼u012280941的回复:第一個子元素的margin-top會被父容器搶走，這是規定
詳見w3原文(8-3-1)：http://www.w3.org/TR/CSS2/box.html
请问第一个子元素是指那个div新手见谅~

千问 · 2021-1-27 07:05:22

引用2楼wz_307的回复:LZ可以自己试验一下:将sec的display改为各种值,比如inline-block试试效果;再将.fir的display改为各种值试试效果.
很厉害我将.sec改为了inline-block就达到了我想象的那种效果但是我想请问下这其中的原因是什么呢？？

千问 · 2021-1-27 07:05:22

引用4楼u010526199的回复:Quote: 引用2楼wz_307的回复:
LZ可以自己试验一下:将sec的display改为各种值,比如inline-block试试效果;再将.fir的display改为各种值试试效果.
很厉害我将.sec改为了inline-block就达到了我想象的那种效果但是我想请问下这其中的原因是什么呢？？
具体可以看这里http://www.w3school.com.cn/cssref/pr_class_display.asp

千问 · 2021-1-27 07:05:22

引用4楼u010526199的回复:Quote: 引用2楼wz_307的回复:
LZ可以自己试验一下:将sec的display改为各种值,比如inline-block试试效果;再将.fir的display改为各种值试试效果.
很厉害我将.sec改为了inline-block就达到了我想象的那种效果但是我想请问下这其中的原因是什么呢？？
Marginsofinline-blockboxesdonotcollapse(notevenwiththeirin-flowchildren).
inline-block盒模型不會套用collapsemargin
collapsemargin中文該怎麼翻我不太清楚，請高人翻譯!!

千问 · 2021-1-27 07:05:22

引用6楼u012280941的回复:Quote: 引用4楼u010526199的回复:
Quote: 引用2楼wz_307的回复:
LZ可以自己试验一下:将sec的display改为各种值,比如inline-block试试效果;再将.fir的display改为各种值试试效果.
很厉害我将.sec改为了inline-block就达到了我想象的那种效果但是我想请问下这其中的原因是什么呢？？
Marginsofinline-blockboxesdonotcollapse(notevenwiththeirin-flowchildren).
inline-block盒模型不會套用collapsemargin
collapsemargin中文該怎麼翻我不太清楚，請高人翻譯!!
外边距合并