CSS basic tutorial: padding and margin properties

CSS padding properties: the distance between the border line and the content

Note: What we usually call the width and height properties, they Refers to the width and height of the content, excluding inner and outer margins and border lines.

padding-left: left inner padding distance, the distance between the left line and the content.
padding-right: the right inner padding distance, the distance between the right line and the content.
padding-top: top inner padding distance, the distance between the top edge and the content.
padding-bottom: the distance between the bottom padding and the bottom line to the content.
Abbreviated form

padding:10px; //The inner padding on the four sides is 10px
padding:10px 20px; //10px for top and bottom, 20px for left and right
##padding:5px 10px 20px; //5px for top and 10px for left and right , the bottom is 20px
padding:5px 10px 15px 20px; //The order must be "top, right, bottom, left"

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    .box{
        border:1px solid red;
        background-color:#f0f0f0;
        width:300px;
        padding:20px;
    } 
    </style>
    </head>
    <body>
        <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
        </div>
    </body>
</html>

CSS margin property: the distance outward from the edge

##margin:10px; //The four outer margins are 10px

margin:10px 20px //Top and bottom margins 10px, left and right margins 20px
margin:5px 10px 15px; //Top and bottom margins 5px, left and right margins 10px, bottom margin 15px
margin:5px 10px 15px 20px; //The order must be "top, right, bottom, left"

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    .box{
        border:1px solid red;
        background-color:#f0f0f0;
        width:300px;
        margin:20px;
    } 
    </style>
    </head>
    <body>
        <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
        </div>
    </body>
</html>

Next Section

new file

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <style type="text/css">
 .box{
 border:1px solid red;
 background-color:#f0f0f0;
 width:300px;
 padding:20px;
 } 
 </style>
 </head>
 <body>
 <div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
 </div>
 </body>
</html>

submit Reset Code

Automatic operation