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. 第一篇blog

    之前不用blog,但是在杭电oj,poj上刷题,总会自己总结题型和使用什么算法,算法模板,自己在笔记本上写,耗时费力,感觉用键盘敲得总结,分享,大家相互学习提高.有时遇到不会做的,或者总是在oj上跑的 ...

  2. 使用phpize安装php扩展

    环境: CentOs 6.3 php 7 nginx 举例: 安装ssh2扩展 1.登陆http://pecl.php.net,搜索ssh2,如下图所示,注意版本的选择要根据php的版本来 2.下载s ...

  3. ASP.NET MVC 概述

    目标:学习ASP.NET MVC 和ASP.NET WebForm的不同之处.学习在合适的地方使用ASP.NET MVC. MVC(Model-View-Controller)结构模式把一个对象分离成 ...

  4. 【PHP面向对象(OOP)编程入门教程】23.自动加载类 __autoload()函数

    很多开发者写面向对象的应用程序时,对每个类的定义建立一个 PHP 源文件.一个很大的烦恼是不得不在每个脚本(每个类一个文件)开头写一个长长的包含文件的列表. 在软件开发的系统中,不可能把所有的类都写在 ...

  5. 解析ActionResult子类JsonResult

    前言 MVC我是11开始使用的,当时还是在上地软件园一小型互联网公司,当时是MVC2.0+Linq to sql.后来接着学习MVC3,MVC3的出现确实让我有种眼前一亮的感觉,期间我不断的写各种de ...

  6. RAC学习笔记

    RAC学习笔记 ReactiveCocoa(简称为RAC),是由Github开源的一个应用于iOS和OS开发的新框架,Cocoa是苹果整套框架的简称,因此很多苹果框架喜欢以Cocoa结尾. 在学习Re ...

  7. Linux打包与压缩及tar命令详解

    打包和压缩   在linux中,打包和压缩可以说是两个不同的概念,弄清这两个概念对于我们理解复杂的文件后缀有非常大的帮助 打包 将若干个文件和目录打包在一起变成一个大的文件,这时只是简单的打包,所以一 ...

  8. Castle.ActiveRecord多数据库配置

    最近使用Castle.ActiveRecord框架,网上关于多数据支持的文章很少,因此有了这篇博文的产生. 开发工具VS2015,Sql Server2008R2 新建数据库,数据初始化脚本如下: - ...

  9. xhtmlConformance与xhtml脚本呈现

    此配置节只有一个属性——mode,该特性为 ASP.NET 应用程序指定 XHTML 呈现模式.它包含三个值 要让此配置生效,需要把<pages>配置节中的controlRendering ...

  10. jQuery页面顶部下拉广告

    本广告可以是图片也可以是Flash,可以设置自动播放的时间,可以手动停止和重播. 效果展示 http://hovertree.com/texiao/jquery/80/ 源码下载:http://hov ...