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鸢尾花分类实现

    #coding:utf-8 from sklearn.datasets import load_irisfrom sklearn.model_selection import train_test_s ...

  2. IDisposable

    自己备用 public static class PHDApi : IDisposable { private PHDAccess _phd = null; // Track whether Disp ...

  3. AD域自定义属性《完整》

    1.安装Active Directory 架构,下载:adminpak.msi安装. 2.以管理员运行cmd,执行:regsvr32 schmmgmt.dll(该命令将在计算机上注册“schmmgmt ...

  4. kettle用mysql创建资源库执行sql代码报错

    一.原因:  sql语句里边使用 'Y' 'N'  给boolean类型的赋值产生sql失败    二.解决方法:将insert语句中‘Y’或‘N’ 改成TRUE或FALSE即可,共两张表3个地方  ...

  5. tkinter学习系列（四）之Button 控件

    目录 目录 前言 (一)基本用法和可选属性 ==1.基本用法== ==2.可选属性== (二)属性的具体实现和案例 ==1.常用属性== ==案例一== ==2.按钮里的图片== ==案例二== == ...

  6. January 27th, 2018 Week 04th Saturday

    How long is forever? Sometimes, just one second. 永远有多久?有时候只是一秒. Just one second can make your life t ...

  7. CSS 中伪类的顺序

    因为css渲染方式的关系: 快速记忆方法:LoVe HAte 原则: L:link V:vistered H:hover A:active li :link { color: greenyellow; ...

  8. Redis和Memcached的一些区别

    我们都知道,把一些热数据存到缓存中可以极大的提高速度,那么问题来了,是用Redis好还是Memcached好呢,以下是它们两者之间一些简单的区别与比较: 1. Redis不仅支持简单的k/v类型的数据 ...

  9. MySql常用命令集Mysql常用命令5

    九. 交叉查询 交叉查询可以对数据进行总和,平均,计数或其他总和计算法的计算,这些数据通过 两种信息进行分组:一个显示在表的左部,另一个显示在表的顶部. Microsoft Jet SQL 用TRAN ...

  10. (2)free详解 (每周一个linux命令系列)

    (2)free详解 (每周一个linux命令系列) linux命令 free详解 引言:今天的命令是用来看内存的free free 换一个套路,我们先看man free中对free的描述: Displ ...