CSS 内边距 (padding) 实例
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS 内边距属性
属性 描述
padding    简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left   设置元素的左内边距。
padding-right  设置元素的右内边距。
padding-top    设置元素的上内边距。
###################

1.所有填充属性在一个声明中
本例演示使用简写属性将所有的填充属性设置于一个声明中，可以有一到四个值。
    <style type="text/css">
        td.test1 {padding: 1.5cm}
        td.test2 {padding: 0.5cm 2.5cm}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td class="test1">
            这个表格单元的每个边拥有相等的内边距。
        </td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td class="test2">
            这个表格的上和下内边距是 0.5 cm, 左和右内边距是2.5
        </td>
    </tr>
</table>
</body>

2.设置下内边距 1
本例演示如何使用厘米值来设置单元格的下内边距。
    <style type="text/css">
        td{padding-bottom:2cm}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>
           这个是表格单元拥有下午内边距。
        </td>
    </tr>
</table>

</body>

3.设置下内边距 2
本例演示如何使用百分比值来设置单元格的下内边距。
    <style type="text/css">
        td{padding-bottom: 10%}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>
            这个表格单元拥有下内边距。
        </td>
    </tr>
</table>

4.设置左内边距 1
本例演示如何使用厘米值来设置单元格的左内边距。
    <style type="text/css">
        td{padding-left:2cm
        }
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>
            这个表格单元拥有左内边距。
        </td>
    </tr>
</table>

5.设置左内边距 2
本例演示如何使用百分比值来设置单元格的左内边距。

    <style type="text/css">
        td{padding-left: 10%}
    </style>
</head>
<body>
<table border="1">
<tr>
    <td>
        这个表格拥有左内边距。
    </td>
</tr>
</table>

6.设置右内边距 1
本例演示如何使用厘米值来设置单元格的右内边距。
    <style type="text/css">
        td{padding-right:5cm}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>
            这个表格单元拥有右内边距。
        </td>
    </tr>
</table>
7.设置右内边距 2
本例演示如何使用百分比值来设置单元格的右内边距。
    <style type="text/css">
        td{padding-right:10%}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>
            这个表格单元拥有右内边距。
        </td>
    </tr>
</table>
</body>

8.设置上内边距 1
本例演示如何使用厘米值来设置单元格的上内边距。
    <style type="text/css">
        td{padding-top:2cm}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>
            这个表格单元拥有上内边距。
        </td>
    </tr>
</table>

9.设置上内边距 2
本例演示如何使用百分比值来设置单元格的上内边距。
    <style type="text/css">
        td{padding-top:10%}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>
            这个表格单元拥有上内边距。
        </td>
    </tr>
</table>
</body>

CSS 内边距 (padding) 实例的更多相关文章

  1. W3School-CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CS ...

  2. CSS 内边距 padding 属性

    CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...

  3. (转)css内边距与外边距的区别，精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

  4. CSS 内边距 外边距

    CSS 内边距 外边距 <html> <!-- style="margin: 0 auto" 将网页上方空白边距填满--> <body style=& ...

  5. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

  6. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  7. css内边距 边框

    /*1 元素的各边都有 10 像素的内边距 四个值上.右.下.左 两个上下,左右 三个值:上,左右,下*/ /*p {padding: 10%;}*/ h1 { padding-top: 10px; ...

  8. W3School-CSS 外边距 (margin) 实例

    CSS 外边距 (margin) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS ...

  9. CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

随机推荐

  1. 找Maven --> pom.xml --> groupId和artifactId的网站

    http://mvnrepository.com/ 在此记录

  2. exec 动态脚本 里面的参数和sp_executesql （注意引号，否则容易异常）

    @indexCt int@DemographicName nvarchar(500)INSERT INTO #finalTemp EXEC('SELECT a.QuestionId,a.AnswerI ...

  3. 对haproxy文件进行增删改查

    1.文件内容 global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 info defaults log global ...

  4. fedora 配置使用点滴

    fedora 配置使用点滴 fedora 16 无线网设置 fodera16是3.x的内核,无线网卡的驱动有点不一样. 可以用如下方法安装,需要先用有线网来安装几个包,步骤如下: 执行这个命令看看网卡 ...

  5. 在pycharm中每次运行代码不使用console而使用run

    问题:在pycharm中点击run运行程序,发现没有打开run窗口,而是打开的Python console窗口. 解决方法:打开菜单栏run->edit configurations,把下图中的 ...

  6. 模糊查询sql语句条件是中文在后台从数据库查不到结果，是英文和字母就可以，而且统一编码为UTF-8了！！！

    4.在mysql安装目录下打开my.ini文件 5.保存,接着打开电脑的服务选项,将MySQL 重启 6. 重启后重新进入dos 窗口的MySQL ,输入show variables like &qu ...

  7. 【BZOJ4310】跳蚤

    [BZOJ4310]跳蚤 Description 很久很久以前,森林里住着一群跳蚤.一天,跳蚤国王得到了一个神秘的字符串,它想进行研究. 首先,他会把串分成不超过 k 个子串,然后对于每个子串 S,他 ...

  8. 使用with open语句(未完)

    来源链接 https://blog.csdn.net/testcs_dn/article/details/45719357 读文件 读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和 ...

  9. 自己定义控件-DragButton

    版权声明:本文为博主原创文章.欢迎转载,转载请注明博主和原文链接. https://blog.csdn.net/u014077888/article/details/28097273 一.描写叙述 可 ...

  10. C/C++每日小练（七）——墓地雕塑

    墓地雕塑 题目描写叙述: 在一个周长为10000的圆上等距分布着n个雕塑. 如今又有m个新雕塑增加(位置能够任意放).希望全部n+m个雕塑在圆周上均匀分布.这就须要移动当中一些原有的雕塑.要求n个雕塑 ...