CSS——透彻理解margin的使用方法

最新推荐文章于 2024-04-15 19:17:28 发布

浅端

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量274

点赞数

文章标签： css margin

本文链接：https://blog.csdn.net/qq_40686529/article/details/102777705

版权

之前我认为margin不过是盒子与盒子之间上下左右的距离而已，虽然事实如此，但是它们之间距离的规则我还是没有透彻理解，今天更是遇到了margin:-100px;这种写法，让我不得不再好好了解一下margin.

——阅读本篇文章需要10-15分钟

margin的控制方式是通过margin-top,margin-right,margin-bottom,margin-left，控制盒子模型各个方向的距离。但是不幸地是盒子又分为同级盒子，父子盒子。

同级盒子

① 如果现在有左右两个div:box1,box2（假设已经处理好block的问题），那么它们俩的距离为box1的margin-right加上box2的margin-left。

② 如果现在有上下两个div:box1(margin-bottom:100px;),box2(margin-top:50px)，那么它们的竖直距离为100px(不是相加，而是取最大的那个)

同级盒子不需要考虑padding的问题，但是在父子盒子里要注意padding。

① 水平方向。现有father(padding:100px;)和son(margin-left:100px)盒子，那么son盒子左边框距父盒子左边框200px。即父子之间的距离是父盒子的padding加上子盒子的margin。

② 竖直方向。竖直方向又分父盒子有padding值和无padding值。

有padding值。规则同水平方向。
无padding值。这时会出现bug（父子上边框无法分开，子盒子设置的margin-top会被应用到父盒子）此处必须要有一张图才能表达我的心情！可以看到子盒子设置的margin-top被应用到了父盒子。而对于此bug的处理方式最好用的是给父盒子添加overflow:hidden。更多方法点击深入理解margin

介绍完他们的距离规则，这里再附加两种难理解的方式：“ % ”的使用和“ - ”的使用。

% ：是相对于父元素的width。father(width:100px;height:99900px;),son(margin-left:10%;margin-top:10%;),那么子盒子左边框距父盒子10px,上边距也是10px。为什么不是999px呢？因为是只相对于父元素的width啊！
- ：在margin-right和margin-bottom使用" - "会把后面的元素拉过来。例如：

    <div class="box"></div>
    <hr style="background: red; />

            .box{
                width: 100px;
                height: 100px;
                background: red;
            }

注意看底下的蓝色的hr线。在给box添加一个margin-bottom: -50px;样式之后，box会把它后面的元素拉上来50px，变成

在margin-left和margin-top使用“ - ”则自身元素会向左或者向上移动

这个margin-left:-100px我十分迷惑，最终是在chrome的控制台上自己调动才发现了它的规则。如果你读不懂我的文字，可以这样试试：

使用方法是打开控制台，把找到对应的DOM，点击magin属性，然后使用键盘上的上下键就可以看到DOM移动了。

另外注：本篇文章是自我理解，我也是在学习的过程中，如有错误，，欢迎大佬指正，或者更多的看法，请底部留言，十分感谢。

关注