CSS 基础教程-062 CSS 框模型内边距属性设置

hrs 提交于 2020/02/09 - 21:53 , 周日

什么是内边距:就是元素边框到元素间的距离。 内边距分别按上、右、下、左 顺序进行设置。

实例代码:

<!doctype html>
<html>
        <head>
            <meta charset="utf-8">
            <style type="text/css">
            div.box{
                width:200px;
                height:100%;
                background-color:yellow;
                border:5px solid blue;
               padding-left:15px;
                text-align:left;
            }
            p{color:red;}
            table,th,td{border:1px solid black;}
            th,td{text-align:center;padding:5px;width:100px;}
            table{caption-side:top;}
            caption{
                    text-align:left;
                    color:red;
            }

            </style>
        </head>
        <body>
            <h3>内边距实例</h3>
            <div class="box">
                    <p>宽度为:200px;<br/>

                       高度为:100%;<br/>
                       背景颜色:yellow;<br/>
                       边框为:5px 实线 蓝色;<br/>
                       内边距为:15px;

                    </p>
            </div>
            <br/>
            <table>
                    <caption>内边距的属性</caption>
                <tr>
                    <th>属性</th>
                    <th>注释</th>
                </tr>

                <tr>
                    <td>padding-top</td>
                    <td>上边距</td>

                </tr>

                <tr>
                    <td>padding-right</td>
                    <td>右边距</td>
              </tr>
                <tr>
                    <td>padding-bottom</td>
                    <td>下边距</td>
                </tr>
                <tr>
                    <td>padding-left</td>
                    <td>左边距</td>
                </tr>
            </table>

            <p><b>注释:</b>边距是按上,右,下,左的顺序来设置。</p>
        </body>
</html>
                                             

运行效果:

css_062.png

标签