行内元素和块级元素的区别以及display属性的使用

1、行内元素

1. 设置高宽无效。
2. 对margin设置左右方向有效，上下无效，padding值都有效。
3. 不会自动换行。

 <span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>

2、块级元素

1. 可以设置宽高。
2. 可以设置margin和padding。
3. 可以自动换行。
4. 多个块状，默认排列从上到下。

<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>

什么时候使用display属性？

1）block

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

2）inline

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

3）inline-block

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

一般都是将行内元素转成块级元素或者行内块元素。