css - padding和margin的问题
本文介绍了css - padding和margin的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么给small设置margin没有效果而父元素却发生了向下移动
还有给small设置padding-left完全没用。这是之前从来没遇到过得求解答
还有一个问题子元素padding-left-right 父元素也要相对调整宽度
那么如果子元素padding-top 父元素用不用调整高度呢？
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0 ;padding:0}
.big{width:960px;height:50px;background: yellow;margin:0 auto;}
.small{width:900px;height:30px;background: red;margin: 10px auto}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>解决方案
补充下回答1：出现这种情况是因为发生外边距合并，所以其父元素却发生了向下移动，以下是关于外边距的解释，
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
题主可以看下关于margin特性的详细解释
http://www.poluoluo.com/jzxy/...
这篇关于css - padding和margin的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
