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. python第九十六天 ---Django(1)

    django 模块 一  安装: pip3 install django 或 python -m pip install django 二  添加环境变量 相关命令: #cmd 下 django-ad ...

  2. python第八十四天－－－十五周作业

    后台管理页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 第五章 绘图基础（LINEDEMO）

    LINEDEMO程序绘制一个矩形.两条直线.一个椭圆和一个圆角矩形.该程序表明,定义了封闭矩形的这些函数确实对这些区域进行了填充,因为椭圆后面的线被隐藏了. /*------------------- ...

  4. Navicat连接Oracle的几个问题及解决方案

    1.用Navicat连接Oracle数据库时报错ORA-28547:connection to server failed,probable Oracle Net admin error 解决方案: ...

  5. YUM仓库服务与PXE网络装机

    1.yum:基于RPM包构建软件更新机制自动解决依赖关系,软件包由软件包库提供 提供方式:ftp服务:ftp://IP地址/仓库目录 Http服务:http ://  IP地址/仓库目录 本地目录:f ...

  6. Orcale新增、修改、删除字段

    一.新增字段 alert table user add( userName VARCHAR2(255 CHAR) ) ; 设置字段不为空, 给出默认值 alert table user add( us ...

  7. C语句详细（初学者）

    C程序的执行部分是由语句组成的.程序的功能也是由执行语句实现的. C语句分为以下六类: 1.表达式语句:表达式加上分号“:”组成.执行表达式语句就是计算表达式的值. 2.函数调用语句:函数名.实际参数 ...

  8. GC Ergonomics间接引发的锁等待超时问题排查分析

    1. 问题背景 上周线上某模块出现锁等待超时,如下图所示: 我虽然不是该模块负责人,但出于好奇,也一起帮忙排查定位问题. 这里的业务背景就是在执行到某个地方时,需要去表中插入一批数据,这批数据需要根据 ...

  9. 解决eclipse中Tomcat服务器的server location选项不能修改的问题

    在Eclipse菜单栏中选择window — show view — server 可以看到服务的面板,服务面板中可看到已配置的Tomcat以及Tomcat下的项目 双击tomca进入设置界面,如果看 ...

  10. MySQL慢查询1- 开启慢查询

    本文章摘自网络,学习之用 一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 二.参数说明 slow_query_log ...