CSS 内边距 (padding) 实例
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) 实例的更多相关文章
- W3School-CSS 内边距 (padding) 实例
CSS 内边距 (padding) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CS ...
- CSS 内边距 padding 属性
CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...
- (转)css内边距与外边距的区别,精辟啊
css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...
- CSS 内边距 外边距
CSS 内边距 外边距 <html> <!-- style="margin: 0 auto" 将网页上方空白边距填满--> <body style=& ...
- CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系
一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...
- css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
- css内边距 边框
/*1 元素的各边都有 10 像素的内边距 四个值上.右.下.左 两个上下,左右 三个值:上,左右,下*/ /*p {padding: 10%;}*/ h1 { padding-top: 10px; ...
- W3School-CSS 外边距 (margin) 实例
CSS 外边距 (margin) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS ...
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
随机推荐
- SpringBoot项目在新电脑上的配置运行,包括JDK+MAVEN+Git+SpringBoot配置等
该教程记录了我在一台新的电脑上安装IDEA,配置JAVA+MAVEN+GIT+SpringBoot项目的过程,最终完成了项目的运行. 一.若想利用IDEA的git工具从GitHub或者码云上面获取项目 ...
- [20180608]Wrong Results with IOT, Added Column and Secondary Index.txt
[20180608]Wrong Results with IOT, Added Column and Secondary Index.txt --//链接:http://db-oriented.com ...
- [20180122]列统计与直方图.txt
[20180122]列统计与直方图.txt --//昨天看了https://jonathanlewis.wordpress.com/2018/01/18/column-stats/,提到分析metho ...
- UEditor单个图片上传遇到的问题记录
查看了ueditor.all.js得源代码发现单图片上传是在选择文件输入框change事件执行表单Submit,但是出现一个问题请求头没有加入Cookie,导致后端身份认证失败,上传最终失败. ued ...
- sql server2014企业版无人值守批处理脚本自动化安装
▲版权声明:本文为博主原创文章,未经博主允许不得转载. SQL Server系列软件是Microsoft 公司推出的关系型数据库管理系统.2014年4月16日于旧金山召开的一场发布会上,微软CEO萨蒂 ...
- Go学习笔记01-环境搭建
最近想学学Go语言,就在笔记本上配置了Go的环境. 本人的运行环境为:Windows 10 1709. 1.下载安装包 到官网下载安装包,官网网址为:Go安装包下载地址 现在Go的最新版本为1.9.2 ...
- 兼容IE8及以上的常用css选择器
p~ul//位于p元素后边的ul div>p div+p//紧接在 <div> 元素之后的所有 <p> 元素 [attribute]//[target]选择带有 targ ...
- Linux驱动的两种载入方式过程分析
一.概念简述 在Linux下能够通过两种方式载入驱动程序:静态载入和动态载入. 静态载入就是把驱动程序直接编译进内核.系统启动后能够直接调用.静态载入的缺点是调试起来比較麻烦,每次改动一个地方都要又一 ...
- Java 浅拷贝,深拷贝
从Java 强引用.软引用,弱引用http://blog.csdn.net/jltxgcy/article/details/35558465一文中,我们看到把一个对象赋值给另一个对象,本质上 ...
- PHP中使用CURL实现GET和POST请求数据
PHP中使用CURL实现GET和POST请求 一.什么是CURL? cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 ...