行内元素和块级元素的区别

目录

行内元素和块级元素的区别

1.行内元素：

2.块级元素：

常见的行内元素有：

常见的块级元素有：

---

行内元素和块级元素的区别

1.行内元素：

默认在一行内展示，不会独占一行。

不可以设置宽度和高度，宽度和高度是由内容决定的。

不可以设置上下外边距（margin），只可以设置左右外边距。

可以和其他行内元素在同一行中显示。

2.块级元素：

默认独占一行，从新行开始展示。

可以设置宽度和高度，宽度默认是100%。

可以设置上下外边距（margin)。

会和其他块级元素分行显示。

需要注意的是，CSS中可以通过display属性的设置改变元素的默认展示行为，例如将行内元素变为块级元素，或者将块级元素变为行内元素。

常见的行内元素有：

a、span、strong、em、img、input等。

<a href="#">11111</a><!--超链接-->

<span style="color: red">1111</span><!--定义颜色-->

<strong>222</strong><!--加粗-->

<img src="1.8.png"><!--插入图片-->

<p>文本框<input  name="元素名称"></p><!--文本框-->

常见的块级元素有：

div、p、h1-h6、ul、li等。

<div></div><!--内容划分元素>

<p></p><!--行-->

<h1></h1><!--标签-->

<ul><!--无序列表-->
    <li></li>
</ul>

4. 元素类型转换 

display：block ，定义元素为块级元素

display : inline ，定义元素为行内元素

display：inline-block，定义元素为行内块级元素

总结

不管块级元素还是行内元素，区别:一是排列方式，二是宽高边距设置，三是默认宽度。

块级元素会独占一行，而内联元素和内联块元素则会在一行内显示；

块级元素和内联块元素可设置 width、height 属性，而内联元素设置无效；

块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度；

而行内块级元素又同时拥有块级元素和行内元素的特点。