HTML5+CSS3学习笔记（七）
本系列更多文章，可以查看专栏 HTML+CSS学习笔记
文章目录
- HTML5+CSS3学习笔记（七）
- 一、 关于行内元素span
- 1. 初始状态
- 2. 设置四个方向的外边距（margin:10px;）
- 3. 设置左右内边距（padding:0 10px;）
- 4. 设置上下内边距（padding:10px 0;）
- 5. 测试代码
- 二、 关于行内元素img
- 1. 初始状态
- 2. 设置四个方向的外边距（margin:10px;）
- 3. 设置左右内边距（padding:0 10px;）
- 4. 设置上下内边距（padding:10px 0;）
- 5. 测试代码
- 三、 总结
- 结尾
一、 关于行内元素span
1. 初始状态
初始布局、样式介绍：
（1）第一个块级div包含span1，位于第一行（背景颜色为半透明）
（2）span2、span3、span4未处于任何div中，位于第二行
（3）第二个块级div包含span5，位于第三行（背景颜色为半透明）
初始布局、样式，效果如下图所示：
以下测试均单独进行，结果须与初始状态效果图进行比较比较
2. 设置四个方向的外边距（margin:10px;）
为方便观察，为第二行的span均设置四个方向的外边距，效果如下图所示：
- 上下外边距未生效
- 左右外边距生效，影响左右侧盒子布局
- 水平方向实际间距为两者外边距之和
3. 设置左右内边距（padding:0 10px;）
为行内元素2，行内元素3，行内元素4设置左右内边距，效果如下图所示：
- 左右内边距生效，背景颜色区域扩大
- 影响左右侧盒子布局
4. 设置上下内边距（padding:10px 0;）
为行内元素3设置上下内边距，效果如下图所示：
- 上下内边距生效，上下方向的背景颜色区域扩大
- 但未影响上下方盒子布局
5. 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>行内元素设置margin和padding是否生效_span</title>
<style>
/* 为观察效果，均单独进行测试 */
* {
margin: 0;
padding: 0;
font-size: 25px;
}
.span1 {
background-color: rgba(0, 0, 0, 0.5);
/* 测试3：同时，查看垂直方向间距 */
padding: 10px 0;
}
.span2 {
background-color: cornflowerblue;
/* 测试1：同时，查看水平方向间距*/
/* margin: 10px; */
/* 测试2：同时，查看水平方向间距 */
/* padding: 0 10px; */
}
.span3 {
background-color: tomato;
/* 测试1：为行内元素3设置四个方向的外边距*/
/* margin: 10px; */
/* 测试2：为行内元素3设置左、右内边距 */
/* padding: 0 10px; */
/* 测试3：为行内元素3设置上、下内边距;便于观察设置半透明背景颜色 */
background-color: rgb(255, 99, 71, 0.5);
padding: 10px 0;
}
.span4 {
background-color: pink;
/* 测试1：同时，查看水平方向间距*/
/* margin: 10px; */
/* 测试2：同时，查看水平方向间距 */
/* padding: 0 10px; */
}
.span5 {
background-color: rgba(0, 0, 0, 0.5);
/* 测试3：同时，查看垂直方向间距 */
padding: 10px 0;
}
</style>
</head>
<body>
<div>
<span class="span1">我是行内元素1,我是行内元素1,我在一个div里</span>
</div>
<span class="span2"> 我是行内元素2 </span>
<span class="span3"> 我是行内元素3 </span>
<span class="span4"> 我是行内元素4 </span>
<div>
<span class="span5">我是行内元素5,我是行内元素5,我在一个div里</span>
</div>
</body>
</html>二、 关于行内元素img
1. 初始状态
初始布局、样式介绍：
（1）第一个块级div包含三张img，位于第一行
（2）第二个块级div包含三张img，位于第二行
（3）body设置了背景颜色，同时，为每张图片添加了边框
初始布局、样式，效果如下图所示：
以下测试均单独进行，结果须与初始状态效果图进行比较比较
2. 设置四个方向的外边距（margin:10px;）
为所有图片设置四个方向的外边距，效果如下图所示：
- 四个方向的外边距均生效，影响四个方向的盒子布局
- 水平和垂直方向的实际间距均为两者外边距之和
3. 设置左右内边距（padding:0 10px;）
为所有图片设置左右内边距，效果如下图所示：
- 左右内边距生效，影响左右侧盒子布局
- 水平方向实际间距均为两者内边距之和
4. 设置上下内边距（padding:10px 0;）
为所有图片设置上下内边距，效果如下图所示：
- 上下内边距生效，影响上下方盒子布局
- 垂直方向实际间距均为两者内边距之和
5. 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>行内元素设置margin和padding是否生效_img</title>
<style>
/* 为观察效果，均单独进行测试 */
* {
margin: 0;
padding: 0;
}
body {
background-color: aquamarine;
}
img {
border: 2px solid palevioletred;
/* 测试1：为行内元素3设置四个方向的外边距*/
/* margin: 10px; */
/* 测试2：为行内元素3设置左、右内边距 */
/* padding: 0 10px; */
/* 测试3：为行内元素3设置上、下内边距 */
padding: 10px 0;
}
</style>
</head>
<body>
<div>
<img src="./imgs/1.jpg" alt="" />
<img src="./imgs/1.jpg" alt="" />
<img src="./imgs/1.jpg" alt="" />
</div>
<div>
<img src="./imgs/1.jpg" alt="" />
<img src="./imgs/1.jpg" alt="" />
<img src="./imgs/1.jpg" alt="" />
</div>
</body>
</html>三、 总结
img不仅是行内元素，还是替换元素，其它替换元素还有：<input>、<select>、<input>、<textarea>等
- 以span标签规律，作为大多数行内元素的规律；
- 以img标签规律，作为特例的规律
大多数行内元素 | img标签 | ||
外边距 | 左右外边距 | 生效，影响布局，水平方向间距为两者外边距之和 | 生效，影响布局，水平方向间距为两者外边距之和 |
上下外边距 | 未生效 | 生效，影响布局，垂直方向间距为两者外边距之和 | |
内边距 | 左右内边距 | 生效，影响布局，水平方向间距为两者内边距之和 | 生效，影响布局，水平方向间距为两者内边距之和 |
上下内边距 | 生效，但不影响布局（不用管实际间距） | 生效，影响布局，垂直方向间距为两者内边距之和 | |
高度和宽度 | 不生效 | 生效 |
结尾
如有错误，欢迎评论区指正。
