CSS margins and...LOGIN

CSS margins and padding

1010.png

We learned this picture earlier: box box.

The box model mainly defines four areas: content, padding, border and margin.


CSS padding

Padding It is outside the content and within the border. There are 5 properties for the inner margin. Among them, padding is to set all the margins, and the other 4 are to set the top, bottom, left, and right margins respectively.

Properties Description

padding Set all margins

padding-top Set top margin

padding-bottom Set bottom margin

padding-left Set the left margin

padding-right Set the right margin

<!DOCTYPE html>
<html>
    <head>
        <title>测试内边距</title>
        <meta charset="utf-8">
        <!-- 调用CSS样式表 -->
        <style type="text/css">            
            #all{padding: 100px;}/*设置所有内边距*/            
            #top{padding-top: 100px;}/*设置上面的内边距*/            
            #bottom{padding-bottom: 100px;}/*设置下面的内边距*/            
            #left{padding-left: 100px;}/*设置左边的内边距*/
            #right{padding-right: 100px;}/*设置右边的内边距*/
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <td id="top">我是padding-top,我设置了上边距</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td id="bottom">我是padding-bottom,我设置了下边距</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td id="left">我是padding-left,我设置了左边距</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td id="right">我是padding-right,我设置了右边距</td>
            </tr>
        </table>
        <table border="1">
            <tr>
                <td id="all">我是padding,我设置了所有内边距</td>
            </tr>
        </table>
    </body>
</html>

CSS margin

The area surrounding the content border is the margin. The margin is a transparent area by default. The margin accepts any length unit or percentage.

Commonly used attributes for margins:

Attributes Description

margin Set all margins

margin-top Set the top margin

margin- bottom Set the bottom margin

margin-left Set the left margin

margin-right Set the right margin

<!DOCTYPE html>
<html>
    <head>
        <title>测试外边距</title>
        <meta charset="utf-8">
        <!-- 调用CSS样式表 -->
        <style type="text/css">            
         
                    #ss {  
                    background-color: #333;  
                    color: #FFF;  
                    margin-top: 10px;  
                    margin-bottom: 10px;  
                    }  
                    #rr {  
                    font: normal 14px/1.5 Verdana, sans-serif;  
                    margin-top: 30px;  
                    margin-bottom: 30px;  
                    border: 1px solid #F00;  
                    }  
        </style>
    </head>
    <body>
       <p id = "ss">盒子模型主要是有margin(外边距)、border(边框)、padding(内边距)、content(内容)组成</P>
             <p id = "rr">盒子模型主要是有margin(外边距)、border(边框)、padding(内边距)、content(内容)组成</P>
    </body>
    
</html>

Margin and padding attribute values

① Their default values ​​​​are all 0; their attribute values ​​​​can be auto—the elements that are affected by margin are calculated by the browser, and the elements that are affected by padding are calculated by the browser. Calculate padding.

②. Margin allows you to specify negative margin values, but be careful when using them; padding does not allow you to specify negative margin values;

③. The attribute values ​​​​of margin and padding are both There can be 1, 2, 3 and 4:

a. Margin has 4 attribute values ​​(for example, margin:10px 5px 15px 20px;), which means: top margin 10px , 5px of the right outer side, 15px of the lower and outer border, 20px of the left outer side; Padding 5px, bottom padding 15px, left padding 20px;

                      Summary: Whether it is margin or padding, if there are 4 attribute values, then their directions of action clockwise are top and right , lower, left;

                    b. Margin has 3 attribute values ​​(for example, margin: 10px 5px 15px;), which means: top margin 10px, right margin and left margin 5px, bottom margin 15px;

padding has 3 attribute values ​​(for example, padding:10px 5px 15px;), which means: top padding 10px, right padding and left padding 5px, bottom padding 15px; : Whether it is margin or padding, if there are 3 attribute values, then their direction of action clockwise is up, right, left, and down; ), its meaning is: top and bottom margins 10px, right and left margins 5px; The padding and bottom padding are 10px, the right padding and the left padding are 5px; For top, bottom, right and left;

            d. Margin has 1 attribute value (for example, margin:10px;), which means: 4 external margins are all 10px; value (for example, padding:10px;), its meaning is: all four paddings are 10px; are equal;

Next Section

<!DOCTYPE html> <html> <head> <title>测试边距</title> <meta charset="utf-8"> <!-- 调用CSS样式表 --> <style type="text/css"> body{ margin:0px; } .test1{ width:150px; height:150px; border:6px solid red; } .test2{ margin-top:40px; padding-top:40px; width:150px; height:150px; border:6px solid gray; } .test2_son{ width:80px; height:50px; border:12px solid blue; } </style> </head> <body> <div class="test1">test1</div> <div class="test2"> <div class="test2_son">test2_son</div> </div> </body> </html>
submitReset Code
ChapterCourseware