CSS中能否通过设置margin-top和margin-bott

作者: 燃烧吧_小宇宙 | 来源:发表于2016-03-17 15:37 被阅读431次

CSS中能否通过设置margin-top和margin-bott
垂直居中
子元素margin-top为何会影响父元素？
踩坑总结
jQuery实现显示隐藏功能与设置样式
CSS笔记
js动画 - 猜杯子游戏
css设计指南第二章
jQuery_css
移动端横向滚动

<!DOCTYPE html>
<html>
<head>
    <style>
        #a{
            background-color:red;
            height: 100px;
            color: #fff;
        }
        #b{
            width: 60%;
            margin-left: auto;
            margin-right: auto;
            background-color:blue;
            height: 50px;
            margin-top: 50px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="a">
        <div id="b">b</div>
        a
    </div>
</body>
</html>

6.png
这里看到明明是b设置的margin-top，对自己没效果反而对a产生效果了。这是因为当父级元素没有设置border-top或者padding-top的时候，他的第一个子节点（这里包括元素节点和文本节点）如果设置了margin-top，那么这个margin-top会一层层往上越级直到遇到(1)一个设置了border-top或者padding-top的父元素或者(2)直到遇到body或者(3)此父级元素的第一个子节点不为他或他的父元素的时候才停下。（这里表述不清，请自己写code体会，注意每个div里面文本的位置）

** 解决方法： **
给父元素设置一个border-top或者padding-top把子元素管住就可以防止越级了。比如给#a加上border-top: 1px solid transparent;或者padding-top:1px;