行内元素和块级元素的区别有哪些？

在css基础当中，我们往往会遇到块元素和行内元素。在实际开发中，会经常把他们弄混淆，而且很难记住。那么行内元素和块级元素的区别有哪些？下面本篇文章就来给大家介绍一下行内元素和块级元素的区别，希望对大家有所帮助。

image

1、常见行内元素和块级元素

1）、行内元素

<span>、<a>、
、<b>、<strong>、<img>、<input>、<textarea>、<select>、^{、_{、<em>、<del>}}

2）、块级元素

<address>、<center>、<h1>~<h6>、

---

、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

2、display的block、inline和inline-block的区别

1）、block

会独占一行，多个元素会另起一行，可以width、height、margin和padding属性

2）、inline

元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不可以设置垂直方向的padding和margin

3）、inline-block

将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内

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

1）、行内元素

①：设置宽高无效

②：对margin设置左右方向有效，而上下无效，padding设置都无效

③：不会自动换行

2）、块级元素

①：可以设置宽高

②：设置margin和padding都有效

③：可以自动换行

④：多个块状，默认排列从上到下