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. 不在 sudoers 文件中。此事将被报告。

    使用Linux,初学使用root不要太方便,工作中却不会给你这样的,必须要用自己的账号.新账号需要添加sudo的权限. su 使用root登陆 visudo 在root下添加自己的用户名 root A ...

  2. [Java 进阶]Java中的国际化

    背景知识 现代软件开发,往往做出的应用程序不止给一个国家的人去使用.不同国家的人往往存在语言文字不通的问题.由此产生了国际化(internationalization).多语言(multi-langu ...

  3. 一步一步开发Game服务器（三）加载脚本和服务器热更新（二）完整版

    上一篇文章我介绍了如果动态加载dll文件来更新程序 一步一步开发Game服务器(三)加载脚本和服务器热更新 可是在使用过程中,也许有很多会发现,动态加载dll其实不方便,应为需要预先编译代码为dll文 ...

  4. STM32Cube Uart_DMA测试工程

    1.打开软件,新建工程,选择芯片信号,这里选择 2.USART1使能选择"Asynchronous"模式:            3.配置"RCC",High ...

  5. Nancy之结合TinyFox调试备忘

    最近把一个小项目的数据库换成MongoDB,同时用了MongoRepository 这个开源组件来对数据进行操作. 通过NuGet安装之后,它会自动在web.config文件生成一个连接字符串.但是却 ...

  6. Genesis2000使用c#开发脚本

    这是我自学程序以来在博客园的第一篇博客,如有不好的地方请大家指正,谢谢! 这边文章的目的是给予那些在PCB使用Genesis2000程序脚本开发的人员提供.net平台下的开发方法. 目前genesis ...

  7. [Q&A] 在证书存储区中找不到清单签名证书

    方案1:右击项目属性->签名->为 ClickOnce 清单签名,将勾掉的选项去掉. 方案2:在签名中创建一个新的签名. 方案3:记事本打开相应的 csproj 文件,调整节点值.< ...

  8. jQuery实现手机竖直手风琴效果

    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...

  9. 使用NPOI组件完成的Excel导出导入（附源代码，测试通过）

    最近遇到一个Excel导入导出的问题,要支持winform和webform,这里我是一个认真严谨的coder,所以决定把这个记录下来!和大家一起分享一下!如果需要的同学可以下载哦! 对于NPOI这个组 ...

  10. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...