HTML5+CSS3学习笔记(七)
本系列更多文章,可以查看专栏 HTML+CSS学习笔记
文章目录
一、 关于行内元素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标签 | ||
---|---|---|---|
外边距 | 左右外边距 | 生效,影响布局,水平方向间距为两者外边距之和 | 生效,影响布局,水平方向间距为两者外边距之和 |
上下外边距 | 未生效 | 生效,影响布局,垂直方向间距为两者外边距之和 | |
内边距 | 左右内边距 | 生效,影响布局,水平方向间距为两者内边距之和 | 生效,影响布局,水平方向间距为两者内边距之和 |
上下内边距 | 生效,但不影响布局(不用管实际间距) | 生效,影响布局,垂直方向间距为两者内边距之和 | |
高度和宽度 | 不生效 | 生效 |
结尾
如有错误,欢迎评论区指正。