1. 前言

上一篇介绍了外边距，也就是元素跟相邻元素的距离。

本篇来介绍内边距，顾名思义，内边距是指的元素内部的内容，与元素的边的距离。

CSS通过padding来控制内边距。

2. 默认情况

看如下代码：

<body><div class="box">假如生活欺骗了你不要悲伤，不要心急忧郁的日子里需要镇静相信吧，那快乐的日子即将来临心儿永远向往着未来现在却常是忧郁一切都是瞬息，一切都将会过去而那过去了的，将会成为亲切的怀恋</div>
</body>

我们为box类设置宽度、高度，并添加一个边框：

.box {width: 300px;height: 300px;border: 1px solid black;}

效果如下：

我们可以看到，默认情况下，元素内部的内容是紧贴着元素的边的，没有浪费空间。

3. 设置内边距

我们可以通过padding-top、padding-right、padding-bottom、padding-left、，分别设置元素的上、右、下、做外边距。

例如我们可以为box类添加如下样式代码，调整上方和左右两侧的内边距：

     .box {width: 300px;height: 300px;border: 1px solid black;padding-top: 30px;padding-left: 15px;padding-right: 15px;}

通过上面的代码，我们将上边距设为了30px，而左右边距设为了15px，所以效果如下：

4. 简写属性

与外边距margin同样，padding内边距也支持简写属性：

             /* 上下左右边距均设置为10px */padding: 10px;/* 上下10px 左右20px */padding: 10px 20px;/* 上、右、下、左分别为1px 2px 3px 4px */padding: 1px 2px 3px 4px;

也就是说，当只写一个值时，代表同时为4个边设置同样的内边距。

当写两个值时，第一个值代表上下内边距，第二个值代表左右内边距。

当同时写了4个值时，分别代表上、右、下、左四个内边距，也就是从上开始，顺时针的顺序。

5. 小结

内边距、外边距的使用都很频繁，因为我们要控制距离，才能让网页显得错落有致。

零基础CSS入门教程(16)–内边距相关推荐

零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
零基础CSS入门教程(19)–盒子模型简述
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 实例解析 3. 小结 1. 前言之前我们讲过CSS的尺寸.边框.内边距.外边距. 其实这些都是占用网页空间,在CSS中,我们将网页元素 ...
零基础CSS入门教程(18)–颜色值
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 三原色 3. RGB颜色值 4. 16进制颜色值 5. 取色 6. 小结 1. 前言世界是五彩缤纷的,不论是皑皑的白雪.还是飘落的秋叶 ...
零基础CSS入门教程(22)–溢出
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 默认显示溢出部分 3. 隐藏溢出部分 4. 显示滚动条 5. 自动处理 6. 小结 1. 前言之前我们讲过了,网页元素会占据一个盒子的 ...
零基础CSS入门教程(21)–透明
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 实例解析 3. 小结 1. 前言前面将的概念,算是比较抽象比较难一些了,本篇介绍的透明就非常好理解.CSS可以通过opacity属性设 ...
零基础CSS入门教程(13)–边框样式
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 边框的样式 3. 边框宽度 4. 边框颜色 5. 简写属性 6. 单独设定各边样式 7. 小结 1. 前言边框是使用频率很高的样式,图 ...
零基础CSS入门教程(6)–style标签与注释
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. style标签 3. CSS注释 4. HTML注释与CSS注释的区别 5. 小结 1. 前言特别喜欢毛主席的一些文章,例如<论 ...
零基础CSS入门教程(9)–class选择器
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 场景 3. 使用方法 4. 整体解析 5. class选择器的优点 6. 小结 1. 前言前2篇文章分别介绍了元素选择器.id选择器, ...
零基础Bootstrap入门教程(16)--模态框
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 模态框样式 3. 按钮直接关联模态框 4. 通过JS方法打开/关闭模态框 5. 调整大小 6. 动画效果 7. 小结 1. 概述模态框 ...

零基础CSS入门教程(16)–内边距

本文目录