认识一下margin

时间 2019-11-17

标签认识一下 margin 栏目 CSS 繁體版

原文原文链接

标签（空格分隔）： margincss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识margin</title>
    <style type="text/css">

        *{
            padding:0;
            margin:0;
        }
        .box{

            width:300px;
            height:300px;
            border:1px solid red;
            background-color: green;
            margin:20px;

        }
    </style>

</head>
<body>
<!--margin 外边距指的是距离，-->
    <div class="box"></div>



</body>
</html>

特别注意一下margin的特殊之处，margin默认会使咱们看到左边框有8px的宽度，为了去除默认咱们加入{
width:0;
heigth:0;
}具体能够把上述的代码去除{},这个查看一下；

经过上述的代码咱们能够到一个上下左右都是20px的margin；
2.经过以下的代码设置margin上下左右的高度来体验一下滚动的效果：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识margin</title>
    <style type="text/css">

        *{
            padding:0;
            margin:0;
        }
        .box{

            width:300px;
            height:300px;
            border:1px solid red;
            background-color: green;
            margin-top:30px;
            margin-lef:30px;
            margin-bottom:1000px

        }
    </style>

</head>
<body>
<!--margin 外边距指的是距离，-->
    <div class="box"></div>



</body>
</html>

经过上边的margin-bottom的设置的比较大的时候，有明显的滚动的效果了；python

当我加入一个P标签的时候：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识margin</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .box{
            width:300px;
            height:300px;
            border:1px solid red;
            background-color: green;
            margin-top:30px;
            margin-lef:30px;
            margin-bottom:200px
        }
        p{
            border:1px solid red;
        }
    </style>
</head>
<body>
<!--margin 外边距指的是距离，-->
    <div class="box"></div>
    <p>woshiyige pbioqian </p>
</body>
</html>

看到上图咱们能够看到一个盒子的真实的宽高，有包含margin在内的真实的宽高；3d