HTML中行内元素与块级元素的区别

发布网友发布时间：2022-04-23 17:37

共2个回答

懂视网时间：2022-04-06 11:57

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-06 09:05

HTML中行内元素与块级元素的区别：

一、行内元素的特点：

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

②宽度只与内容有关。

③和其他元素都在一行上。

④高，行高及外边距和内边距部分可改变。

二、块级元素具有以下特点：

①高度，行高以及外边距和内边距都可控制。

②总是在新行上开始，占据一整行。

③它可以容纳内联元素和其他块元素。

④宽带始终是与浏览器宽度一样，与内容无关。

三、区别有三个：

行内元素与块级元素直观上的区别。

行内元素会在一条直线上排列，都是同一行的，水平方向排列。

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上。

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

四、列表。

块级元素列表：

2.行内元素列表：

3.可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素：

超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。