视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
margin的BUG(2)_html/css
2020-11-27 16:30:19 责编:小采
文档


继续上一次的学习,这次又发现了margin的第二个bug.既当同时对两个相邻的div盒子设置margin时,他们之间的间隙不能正常显示.

具体表述为:先建立两个div1和div2

 

div2设置成margin-top,div1设置margin-bottom,代码如下:

.div1{ width: 200px;height: 200px; background: green; margin-bottom: 50px; } .div2{ width: 200px;height: 200px; background: blue; margin-top: 80px; }

设置背景色和宽高,是为了方便比对观察

那么两者之间的间隙会变成margin-top和margin-bottom比较出来的最大值.

如果真想要间隙进行相加,则应把div2元素变为inline-block,代码如下:

.div2{ width: 200px;height: 200px; background: blue; margin-top: 80px; display:inline-block; }

 将div2转换为内联块属性后,两者之间的间隙就能正常相加而正确显示了.

下载本文
显示全文
专题