區(qū)別：行內(nèi)元素中設(shè)置寬高是無效的，不會自動換行；而塊級元素可以設(shè)置寬高，可以自動換行。行內(nèi)元素中對margin設(shè)置左右方向有效而上下無效，padding設(shè)置左右方向有效而上下無效；塊級元素中設(shè)置margin和padding都有效。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css基礎(chǔ)當(dāng)中，我們往往會遇到塊元素和行內(nèi)元素。在實際開發(fā)中，會經(jīng)常把他們弄混淆，而且很難記住。那么行內(nèi)元素和塊級元素的區(qū)別有哪些？下面給大家介紹一下。

塊級元素和行內(nèi)元素的定義

什么是塊級元素？

• 總是在新行上開始；

• 高度，行高以及外邊距和內(nèi)邊距都可控制；

• 寬度缺省是它的容器的100%，除非設(shè)定一個寬度。

• 它可以容納內(nèi)聯(lián)元素和其他塊元素

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

什么是行內(nèi)元素？

• 和其他元素都在一行上；

• 高，行高及外邊距和內(nèi)邊距不可改變；

• 寬度就是它的文字或圖片的寬度，不可改變

• 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

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

【推薦教程：《html視頻教程》】

行內(nèi)元素和塊級元素的區(qū)別

1）、行內(nèi)元素

①：設(shè)置寬高無效

②：對margin設(shè)置左右方向有效，而上下無效；padding設(shè)置左右方向有效，而上下無效。

③：不會自動換行

2）、塊級元素

①：可以設(shè)置寬高

②：設(shè)置margin和padding都有效

③：可以自動換行

④：多個塊狀，默認排列從上到下