盒子内两个元素上下外边距重叠的问题

首页课程实战体系课手记专栏慕课教程

盒子内两个元素上下外边距重叠的问题

来源：3-6 编程练习

慕粉1474288341

2019-10-11 11:23:19

https://class.imooc.com/course/qadetail/148695

这里网页里老师说的是在li里设置margin:40px 40px 40px 40px;

我设置的是margin:40px 0px 0px 40px;

发现效果是一样，用调试工具发现全部设置40时，HTML这个li的margin-bottom和CSS这个li的margin-top区域重叠了，这是为什么了，所有的元素都是这样？

写回答

1回答

好帮手慕小班

2019-10-11

同学你好，这是css的一个特性，当空白边叠加时，以较大的margin值为准，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Margin上下边距重叠问题</title>  
<style>  
	#one{
		width:200px;
		height:100px;
		background-color:#ff0000;
		margin:10px;}  
	#two{
		width:200px;
		height:100px;
		background-color:#00ff00;
		margin:10px;}  
</style>  
</head>  
<body>  
<div id="one"></div>  
<div id="two"></div>  
</body>  
</html>

如上所示，one和two盒子的距离是10px，这里我们记住这个特性就可以了哦，但是需要注意一点：当两个对象都浮动的情况下就不再遵守空白边叠加的规则了。

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

0 学习 · 9666 问题

查看课程

相似问题

外边距问题

回答 1

代码问题关于内外边距

回答 4

盒子的大小指的是什么？

回答 1

我写了超出部分隐藏后为啥两个盒子文字距离上面会多出20px呢

回答 3

回答 1

打开慕课网App查看更多内容