什么是块元素和行内元素? 请分别列出五个块元素和行内元素

发布网友发布时间：2022-04-28 08:33

共2个回答

懂视网时间：2022-04-28 12:54

style 属性规定元素的行内样式（inline style）

行内元素属性设置

行内元素同样具有盒子模型

行内元素同样具有盒子模型，那么就可以给行内元素设置不同的 css 属性，比如宽度、高度、内边距和外边距，那么行内元素是否需要设置这些属性呢？

行内元素设置宽度和高度

给行内元素设置宽度和高度是无效的

.span1 {
 height: 200px;
 width: 200px;
}
 
<span class='span1'>行内元素设置宽度和高度</span>

此时我们通过观察页面以及盒子的渲染出来的模型，可以发现：

即使给行内元素设置了宽度和高度，行内元素所表现出来的具体的宽度和高度就是内容本身的宽度和高度，所以给行内元素设置宽和高是无效的

行内元素设置 padding 和 margin

将影响左右，但不影响上下

行内元素设置 padding 和 margin 上下具体值表现

<span class='span2'>行内元素设置边距上下属性</span><br>
 
.span2 {
 padding-top: 20px;
 padding-bottom: 30px;
 margin-top: 40px;
 margin-bottom: 50px;
}

从上面的图我们可以发现，我们给行内元素设置了 padding-top、padding-bottom、margin-top、margin-bottom 属性，但是这些属性并没有发生具体的作用，在效果上看貌似是被撑开了，但是并没有对其他的元素造成影响。

行内元素设置 padding 和 margin 左右具体值表现

会发生效果

<span class='span3'>行内元素设置边距左右属性</span><br>
 
.span3 {
 padding-left: 100px;
 padding-right: 200px;
 margin-left: 300px;
 margin-right: 400px;
}

从上图可以看出，如果我们给行内元素设置 padding-left,padding-right,margin-left,margin-right 属性将会影响该行内元素的位置

更多相关知识，请访问PHP中文网！

热心网友时间：2022-04-28 10:02

块级元素（block-level）

块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。

块级元素有以下几个特点：

总是另起一行（特立独行）

可以设置其宽度、高度，内外边距

在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）

可以容纳行内元素和其他块元素。

行内元素（inline-level）

行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

行内元素的特点：

总是和相邻的行内元素在同一行上（物以类聚）

设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。

默认宽度是他自身内容的宽度。

行内元素只能容纳其他行内元素或者文本。

特殊：a比较特殊，可以放块级元素，但是链接里面不能再放链接。

块级元素 li,p,div,h1,table

行内元素a,span,sub,sup,i,b