CSS 内边距 (padding) 实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓（Outline） 实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

01所有填充属性在一个声明中

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>01所有填充属性在一个声明中</title>

		<style type="text/css">

			body {

				background-color: rgb(180, 204, 134);

			}

			.test1 {

				padding: 1.5cm;

			}

			.test2 {

				padding: 0.5cm 2.5cm;

			}

		</style>

	</head>

	<body>

		<table border="1">

			<tr>

				<td class="test1">

					这个表格单元的每个边拥有相等的内边距。

				</td>

				<td>

					我是来打酱油的。。

				</td>

			</tr>

		</table>

		<br />

		<table border="1">

			<tr>

				<td class="test2">

					这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。

				</td>

			</tr>

		</table>

	</body>

</html>

02设置上下内边距

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>02设置上下内边距</title>

		<style type="text/css">

			body {

				background-color: rgb(180, 204, 134);

			}

			td.test1 {

				padding-top: 2cm;

			}

			td.test2 {

				padding-top: 10%;

			}

			td.test3 {

				padding-bottom: 2cm;

			}

			td.test4 {

				padding-bottom: 10%;

			}

		</style>

	</head>

	<body>

		<table border="1">

			<tr>

				<td class="test1">

					我用长度设置上内边距。

				</td>

				<td class="test2">

					我用百分比设置上内边距。

				</td>

			</tr>

		</table>

		<br />

		<table border="1">

			<tr>

				<td class="test3">

					我用长度设置下内边距。

				</td>

				<td class="test4">

					我用百分比设置下内边距。

				</td>

			</tr>

		</table>

	</body>

</html>

03设置左右内边距

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>03设置左右内边距</title>

		<style type="text/css">

			body {

				background-color: rgb(180, 204, 134);

			}

			td.test1 {

				padding-left: 2cm;

			}

			td.test2 {

				padding-left: 10%;

			}

			td.test3 {

				padding-right: 2cm;

			}

			td.test4 {

				padding-right: 10%;

			}

		</style>

	</head>

	<body>

		<table border="1">

			<tr>

				<td class="test1">

					我用长度设置左内边距。

				</td>

				<td class="test2">

					我用百分比设置左内边距。

				</td>

			</tr>

		</table>

		<br />

		<table border="1">

			<tr>

				<td class="test3">

					我用长度设置右内边距。

				</td>

				<td class="test4">

					我用百分比设置右内边距。

				</td>

			</tr>

		</table>

	</body>

</html>

CSS 内边距 (padding) 实例总结

W3School-CSS 内边距 (padding) 实例的更多相关文章

  1. CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...

  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. (二十)WebGIS中图层树功能的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在GIS的桌面工具中,比如arcgis desktop或者S ...

  2. 去百度API的百度地图准确叠加和坐标转换的解决方案研究

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百 ...

  3. Kooboo CMS 无聊随笔（2）

    上次写了一篇博客 http://www.cnblogs.com/kmsfan/p/Kooboo_CMS_suibi.html 作为这个系列的开篇,简单的介绍了一下Kooboo CMS的一些基本情况和界 ...

  4. PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）

    说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...

  5. 【JVM】JVM系列之Class文件（三）

    一.前言 随着我们学习的不断深入,我相信读者对class文件很感兴趣,class文件是用户编写程序与虚拟机之前的桥梁,程序通过编译形成class文件,class文件之后会载入虚拟机,被虚拟机执行,下面 ...

  6. jQuery-1.9.1源码分析系列（十二） 筛选操作

    在前面分析的时候也分析了部分筛选操作(详见),我们接着分析,把主要的几个分析一下. jQuery.fn.find( selector ) find接受一个参数表达式selector:选择器(字符串). ...

  7. 彻底解决“从客户端中检测到有潜在危险的Request.Form值”

    类似设置validateRequest="false"的方法不推荐,因为应用程序需要显式检查所有输入,不方便. 1.前端使用encodeHtml函数对字符串进行编码,例: var ...

  8. The SQL Server Service Broker for the current database is not enabled

    把一个数据恢复至另一个服务器上,出现了一个异常: The SQL Server Service Broker for the current database is not enabled, and ...

  9. iOS面试用到的一些知识点和技术

    1.APP的生命周期和viewcontroler的生命周期? 答:APP的生命周期:在APP的代理中分为七个阶段: 1.将要启动 2.已经启动 3.将要进入非活动状态 4.进入后台 5.从后台进入前台 ...

  10. Verilog学习笔记基本语法篇（十一）········ 常用系统函数

    1)系统任务:$monitor   格式: $monitor(p1,p2,p3...pn); $monitor; $monitoron; $monitoroff; 任务$monitor提供了监控输出列 ...