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. 何谓Restful

    引言 用过ASP.NET WebApi2.0, 上次去面试被问到什么是Restful ,一时间竟不知道从何说起,所以搜集资料,做个备注,有时间好多来看看加深理解. 什么是Restful 一种软件架构风 ...

  2. Azure Backup (2) Azure备份服务

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China. 本文介绍的Azure管理界面是Classic Model,网址:h ...

  3. [Web API] Web API 2 深入系列(1) 路由

    目录 ASP.NET 路由 注册路由 动态映射HttpHandler WebAPI 路由 注册路由 调用GetRouteData 2个路由系统衔接 GlobalConfiguration Hosted ...

  4. 创建自己的Vagrant box

    这是一个关于Vagrant的学习系列,包含如下文章: Vagrant入门 创建自己的Vagrant box 用Vagrant搭建Jenkins构建环境 用Vagrant和Ansible搭建持续交付平台 ...

  5. CSS清除浮动

    今天看到一篇文章关于清除浮动的,突然间脑袋短路了,咦?为什么要清除浮动?原谅我的无知,搜了下原来是这样,又倒腾出原来的笔记,唉,本来就有记录啊,而且也会经常用到,用的久了连原理都忘了.恩,防止自己再犯 ...

  6. Redis Cluster原理

    Redis Cluster 是Redis的集群实现,内置数据自动分片机制,集群内部将所有的key映射到16384个Slot中,集群中的每个Redis Instance负责其中的一部分的Slot的读写. ...

  7. 【Java每日一题】20161214

    package Dec2016; import java.util.ArrayList; import java.util.List; public class Ques1214 { public s ...

  8. 《数据结构与算法Python语言描述》习题第二章第二题（python版）

    ADT Date: #定义日期对象的抽象数据类型 Date(self, int year, int month, int day) #构造表示year/month/day的对象 difference( ...

  9. [连载]《C#通讯（串口和网络）框架的设计与实现》-3.设备驱动的设计

    目       录 第三章           设备驱动的设计... 2 3.1           初始化设备... 4 3.2           运行设备接口设计... 4 3.3        ...

  10. 解决eclipse配置Tomcat时找不到server选项(Mac通用)

    集成Eclipse和Tomcat时找不到server选项: 按照网上的步骤如下: 在Eclipse中,窗口(window)——首选项(preferences)——服务器(Server)——运行时环境( ...