W3School-CSS 内边距 (padding) 实例

最新推荐文章于 2024-08-05 15:57:37 发布

詹小布

最新推荐文章于 2024-08-05 15:57:37 发布

阅读量194

点赞数

文章标签：人工智能

原文链接：http://www.cnblogs.com/hoey/p/5077821.html

版权

CSS 内边距 (padding) 实例

CSS 实例

CSS 背景实例
CSS 文本实例
CSS 字体(font)实例
CSS 边框(border)实例
CSS 外边距 (margin) 实例
~~CSS 内边距 (padding) 实例~~
CSS 列表实例
CSS 表格实例
轮廓（Outline）实例
CSS 尺寸 (Dimension) 实例
CSS 分类 (Classification) 实例
CSS 定位 (Positioning) 实例
CSS 伪类 (Pseudo-classes)实例
CSS 伪元素 (Pseudo-elements)实例

01所有填充属性在一个声明中

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>01所有填充属性在一个声明中</title>
        <style type="text/css">
            body {
                background-color: rgb(180, 204, 134);
            }
            
            .test1 {
                padding: 1.5cm;
            }
            
            .test2 {
                padding: 0.5cm 2.5cm;
            }
        </style>
    </head>

    <body>
        <table border="1">
            <tr>
                <td class="test1">
                    这个表格单元的每个边拥有相等的内边距。
                </td>
                <td>
                    我是来打酱油的。。
                </td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td class="test2">
                    这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
                </td>
            </tr>
        </table>
    </body>

</html>

02设置上下内边距

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>02设置上下内边距</title>
        <style type="text/css">
            body {
                background-color: rgb(180, 204, 134);
            }
            
            td.test1 {
                padding-top: 2cm;
            }
            
            td.test2 {
                padding-top: 10%;
            }
            
            td.test3 {
                padding-bottom: 2cm;
            }
            
            td.test4 {
                padding-bottom: 10%;
            }
        </style>
    </head>

    <body>
        <table border="1">
            <tr>
                <td class="test1">
                    我用长度设置上内边距。
                </td>
                <td class="test2">
                    我用百分比设置上内边距。
                </td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td class="test3">
                    我用长度设置下内边距。
                </td>
                <td class="test4">
                    我用百分比设置下内边距。
                </td>
            </tr>
        </table>
    </body>

</html>

03设置左右内边距

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>03设置左右内边距</title>
        <style type="text/css">
            body {
                background-color: rgb(180, 204, 134);
            }
            
            td.test1 {
                padding-left: 2cm;
            }
            
            td.test2 {
                padding-left: 10%;
            }
            
            td.test3 {
                padding-right: 2cm;
            }
            
            td.test4 {
                padding-right: 10%;
            }
        </style>
    </head>

    <body>
        <table border="1">
            <tr>
                <td class="test1">
                    我用长度设置左内边距。
                </td>
                <td class="test2">
                    我用百分比设置左内边距。
                </td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td class="test3">
                    我用长度设置右内边距。
                </td>
                <td class="test4">
                    我用百分比设置右内边距。
                </td>
            </tr>
        </table>
    </body>

</html>

CSS 内边距 (padding) 实例总结

转载于:https://www.cnblogs.com/hoey/p/5077821.html

詹小布

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W3School-CSS 内边距 (padding) 实例

CSS 内边距 (padding) 实例CSS 实例CSS 背景实例CSS 文本实例CSS 字体(font)实例CSS 边框(border)实例CSS 外边距 (margin) 实例CSS 内边距 (padding) 实例CSS 列表实例CSS 表格实例轮廓（Outline）实例CSS 尺寸 (Dimension) 实例CSS 分类 (Classification) 实...
复制链接

扫一扫