CSSのマージンとパディングLOGIN

CSSのマージンとパディング

1010.png

私たちは前にこの絵を学びました: box box。

ボックス モデルは主に、コンテンツ、パディング、ボーダー、マージンの 4 つの領域を定義します。


CSS inner margin padding

内側マージンはコンテンツの外側と境界線の内側にあり、パディングはすべてのマージンを設定するための 5 つの属性があります。その他 4 それぞれ、上下左右の余白を設定します。

プロパティの説明

padding すべてのマージンを設定します

padding-top 上マージンを設定します

padding-bottom 下マージンを設定します

padding-left 左マージンを設定します

padding-right 右マージンを設定します

<!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-right 右マージンを設定

<!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とpaddingの属性値

① ①デフォルト値はすべて 0 です。属性値は auto にすることができます。マージンが作用する要素はブラウザによって計算され、パディングはその要素に対してブラウザによって計算されます。 ②では、Margin は外側の距離の値を負の値に指定できますが、Padding では境界距離の値を指定できませんので注意してください。

③、Margin、padding の属性値は 1、2、3 にすることができます。 、3、3、4:

A、Margin には 4 つの属性値があります (例: Margin: 10px 5px 15px 20px;)、意味は次のとおりです: 上と外側の 10px、右外側の 5px 、外側の下側の 15px、外側の左 20px;有 Padding には 4 つの属性値があります (たとえば、padding: 10px 5px 15px 20px;)、その意味は次のとおりです: 上の内側の境界線 10px、右側の内側の境界線 5px、外側の 15px下の内側の境界線、左内側の 20 ピクセルのスペース。

概要: マージンまたはパディングのいずれであっても、属性値が 4 つある場合、それらのアクションの方向は上、右、下、左です

。有 B、Margin には 3 つの属性値があります (例: Margin: 10px 5px 15px;)。その意味は次のとおりです: 上と外側の境界線 10px、右外側と左の外側境界線 5px、下側の外側境界線 15px; :10px 5px 15px;)、その意味は10px、右パディングと左パディング、15pxの平均右パディング、5pxの左パディングです方向の方向は上、右、左、下です

C と Margin には 2 つの属性値 (margin: 10px 5px; など) があり、その意味は次のとおりです: 上と外側の境界線 10px 10px 10px 、右外側と左外側の間隔の 5px;

パディングには 2 つの属性値があります (例: Padding: 10px 5px;)。これは、上部内側の距離と下部内側の境界線 10px、右側の内側と左側の内側を意味します。距離5px;概要:2つの属性値がある場合、時計回りの方向は右下です1 つの属性値 (例: パディング: 10px;)、その意味: 4 つの内側の境界線の距離は 10px です

要約: マージンまたはパディングのいずれであっても、属性値が 1 つある場合、そのマージン値は次のとおりです。等しい;次のセクション
<!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>
コースウェア