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. CSS3知识点整理&&一些demo

    css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen ...

  2. 在IIS下部署Thinkphp项目，验证码不能显示的解决办法

    由于公司租用的是虚拟空间,而且用的是IIS服务器,所以部署PHP的时候就出现很多问题:比如昨天就碰到这个问题:在IIS下部署Thinkphp项目,验证码不能显示 这是生成验证码的方法: // 制作专门 ...

  3. Android APP压力测试(三)之Monkey日志自动分析脚本

    Android APP压力测试(三) 之Monkey日志自动分析脚本 前言 上次说要分享Monkey日志的分析脚本,这次贴出来分享一下,废话不多说,请看正文. [目录] 1.Monkey日志分析脚本 ...

  4. Linux资源控制-CPU和内存

    主要介绍Linux下, 如果对进程的CPU和内存资源的使用情况进行控制的方法. CPU资源控制 每个进程能够占用CPU多长时间, 什么时候能够占用CPU是和系统的调度密切相关的. Linux系统中有多 ...

  5. Windows Phone 如何在程序中播放提示声音？

    在Windows Phone 中播放提示音可以使用 Microsoft.Xna.Framework.Audio 命名空间下的 SoundEffect 类.具体使用方法如下: 1. 根据声音文件路径创建 ...

  6. 用NPOI从DataBase到Excel

    NPOI的C# Helper代码 public static void WriteExcel(DataTable dt, string filePath) { ) { HSSFWorkbook wk ...

  7. 微信扫码支付~官方DEMO的坑~参数不能自定义

    返回目录 由于微信在校验参数时采用了“微信服务端”校验,它的参数是前期定义好的,所以用户不能自己添加自定义的参数,你可以把参数写在Attach字段时,作为它的附加参数. 参数和返回值定义如下: pub ...

  8. h5输入框提示语 + 正常文本框提示语

    <input id="username" name="username" type="text" placeholder=" ...

  9. java中的String

    String作为java最常用的类,被广大程序员们蹂躏已久,让我们又爱又恨,应该如何正确的使用它呢,老姜带你一起来揭开它神秘的面纱. 一.String类定义时被冠上了final的标识符,决定了它终生不 ...

  10. PHP中return 和 exit 、break和contiue 区别与用法

    先说一下exit函数的用法. 作用: 输出一则消息并且终止当前脚本. 如果一段文本中包括多个以 结束的脚本,则exit退出当前所在脚本. 比如一篇php文本包括一下代码,则输出为world. < ...