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. 《R数据挖掘入门》彩色插图（第8章）

    图8.4 图8.5 图8.6 图8.7

  2. 用LinQ扩展方法,泛型扩展方法，实现自定义验证字符是否空、对象是否为null,及泛型约束使用，Action的使用

    一.Linq扩展方法 1.扩展方法必须是静态方法.扩展方法所在的类必须是静态类 2.扩展方法里面的参数必须制定this关键字,紧跟需要扩展的类型,如下: 二.泛型约束 1.使用泛型的原因,是在不知道需 ...

  3. django静态文件

    django静态文件(js脚本.CSS.图片等) 默认统一放在每一个app的static文件夹下, 通过收集静态文件命令,自动将每一个app下static文件夹下的文件复制到根目录的static文件夹 ...

  4. Sender IP字段为"0.0.0.0"的ARP请求报文

    今天在研究免费ARP的过程中,抓到了一种Sender IP字段为“0.0.0.0”的ARP请求报文(广播),抓包截图如下: 这让我很疑惑.一个正常的ARP请求不应该只是Target MAC字段为全0吗 ...

  5. s面向对象的写法

    js面向对象的写法 一.在html中引入该js文件,使用时: <script> var BuyBw8Product = new buyBw8Product(); </script&g ...

  6. plsql developer如何查询SQL语句执行历史记录(转)

    相信很多在plsql developer调试oracle的朋友,经常会遇到在plsql developer执行的某一条SQL语句没有保存,那么我们在plsql developer下如何找到我们执行过的 ...

  7. SAP S4/HANA BP屏幕增强添加自定义字段（BDT方式）

    喜欢博主的读者也许会意识到,这是本博客中第一篇有关屏幕增强的文章.之前没有总结过相关的东西,除了因为相关经验有限之外,我个人也是不喜欢所谓dynpro编程的,它有许多“潜规则”一样的东西要记住,想要运 ...

  8. 实时监听input输入的变化（兼容主流浏览器）【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  9. v-bind指令动态绑定class和内联样式style

    动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...

  10. 如何在sublime编辑器中，执行命令行脚本

    我有个愿意,在执行命令行时,不打开那个黑乎乎命令行窗口,如果编辑器内置支持就好了. 打开vs code 和 sublime,分别按快捷键 Ctrl + ·(tab键上面那个键),vs code可以提供 ...