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. mongodb 配置文件

    本文档是在mongodb为3.4下编写的,仅作为参考,详细内容请参考:https://docs.mongodb.com/manual/reference/configuration-options/# ...

  2. OpenCV 的颜色空间转换

    # coding: utf-8 ''' 第13章主要介绍:颜色空间转换 ''' import cv2 import numpy as np ''' 经常用到的颜色空间转换是: BGR<-> ...

  3. 关掉 ubuntu bug 报告功能

    想关掉这个: 通过服务加配置文件关掉

  4. Lua与C交互之基础操作(1)

    @(语言) Lua是一个嵌入式的语言,可以Lua可以作为程序库用来扩展应用的功能,也可以注册有其他语言实现的函数,这些函数可能由C语言(或其他语言)实现,可以增加一些不容易由Lua实现的功能.这就是L ...

  5. Instruments模板介绍（更新中...）

    第一章.Instruments(仪器)快速入门 Instruments可以用来收集关于一个或者多个系统进程的性能和行为的数据,并跟踪睡着时间产生的数据.它提供了好几个分析模板: Blank 任何类型都 ...

  6. 个人技术博客--团队Git规范（参考西瓜学长）

    援引西瓜学长:GitHub团队项目合作流程 废话少说直接写 1.fork 1.对于组员来说第一步就是fork 2.点击fork之后 上面是我们的团队仓库 切换回自己的仓库 就会看到 是fork于团队仓 ...

  7. 理解LSTM

    本文基于Understanding-LSTMs进行概括整理,对LSTM进行一个简单的介绍 什么是LSTM LSTM(Long Short Term Memory networks)可以解决传统RNN的 ...

  8. golang xorm框架的使用

    1.创建engine engine, err := xorm.NewEngine(driverName, dataSourceName) 上述代码创建了一个数据库引擎,可以在一个程序中创建多个engi ...

  9. 在VUE应用中配置ESLint(代码检查)

    eslint配置方式 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 配置文件:使用一个js文件,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一个文 ...

  10. Java中关于AbstractQueuedSynchronizer的入门（一）

    备注:博文仅仅是学习过程中的零散记录,后期整理. AbstractQueuedSynchronizer的简单介绍可以网上搜索,简单了解字段作用. 示例代码,分析获取锁的过程: import java. ...