CSS学习——外边距

最新推荐文章于 2024-02-04 20:15:08 发布

WangJiaYi948

最新推荐文章于 2024-02-04 20:15:08 发布

阅读量757

点赞数

本文链接：https://blog.csdn.net/WangJiaYi948/article/details/82146019

版权

本文详细介绍了CSS中的外边距属性，包括如何使用margin实现盒子居中，清除元素默认内外边距的方法，以及外边距合并的两种情况和解决策略。通过实例解析了相邻块元素和嵌套块元素垂直外边距合并的现象，并提供了避免合并的解决方案。

摘要由CSDN通过智能技术生成

外边距(margin)

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边距

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足以下两个条件：

必须是块级元素。
盒子必须指定了宽度(width)

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例：

.header { width:960px; margin:0 auto;}

示例:

    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*margin-top: 100px;
        margin-left: 50px;*/
        margin: 30px auto;/*上下 30 左右 auto 自动 这样可以块级带有宽度的盒子水平居中对齐*/
        padding: 4px;
    }
    header {
        width: 900px;
        height: 120px;
        background-color: black;
        margin: 0 auto;/*左右 auto 就可以居中*/
    }
    </style>
</head>
<body>
    <div></div>