認識一下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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。