css margin 值得特点

最新推荐文章于 2021-12-07 17:12:05 发布

_星星之火_

最新推荐文章于 2021-12-07 17:12:05 发布

阅读量275

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lck898989/article/details/79079107

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

margin 外边距的特点：

设置元素外边距的时候要注意这几个特点

1：块级元素的垂直相邻外边距会合并，依据两个相邻的块级元素设置的最大值

2：而行内元素实际上不占上下外边距，行内元素的左右外边距不会合并

3：浮动元素的外边距也不会合并

4：允许制定负的外边距值，不过使用时要小心

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        /*
        块级元素的上下外边距会合并
        */
        .f{
            background: red;
            width: 300px;
            height: 300px;
            margin:100px;
        }
        .s{
            background: blue;
            width: 300px;
            height: 300px;
            margin:100px;
        }
        a{
            color:yellowgreen;
            text-decoration: none;
            background: aliceblue;
            padding:5px;
            margin:10px;
        }
        div{
            /*
            块级元素浮动元素外边距不会合并
            */
            float: left;
        }
    </style>
</head>
        <body>
                <div class="f">
                    <a href="#">行内元素的左右外边距不会合并,没有上下外边距</a>
                    <a href="#">另外一个链接</a>
                </div>
                <div class="s">

                </div>            
        </body>
</html>

_星星之火_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css margin 值得特点

margin 外边距的特点：设置元素外边距的时候要注意这几个特点1：块级元素的垂直相邻外边距会合并，依据两个相邻的块级元素设置的最大值2：而行内元素实际上不占上下外边距，行内元素的左右外边距不会合并3：浮动元素的外边距也不会合并4：允许制定负的外边距值，不过使用时要小心 Page Title
复制链接

扫一扫