行内元素和块级元素

行内元素和块级元素

HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过CSS的display属性相互转换。

行内元素

行内元素对应的CSS样式设置为display: inline;。

特点

• 元素排在一行。
• 封闭后不会自动换行。
• 不能指定高度与宽度。
• 可以使用line-height来指定高度。
• 外边距对于水平方向有效，垂直方向无效。
• 内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。

常见行内元素

<a>、<span>、<b>、<big>、<i>、<small>、<tt>、<abbr>、<acronym>、<cite>、<code>、<dfn>、<em>、<kbd>、<strong>、<samp>、<var>、<bdo>、<br>、 <img>、<iframe>、<map>、<object>、<q>、<script>、<sub>、<sup>、<button>、<input>、<label>、<select>、<textarea>

块级元素

块级元素对应的CSS样式设置为display: block;。

特点

• 独占一行。
• 封闭后自动换行。
• 默认宽度为100%。
• 可以指定宽度和高度。
• 内外边距对于四个方向有效。

常见块级元素

<div>、<address>、<article>、<aside>、<audio>、<blockquote>、<canvas>、<dd>、<dl>、<fieldset>、<figcaption>、<figure>、<footer>、<form>、<h1>~<h6>、<header>、<hgroup>、<hr>、<noscript>、<ol>、<output>、<p>、<pre>、<section>、<table>、<tfoot>、<ul>、<video>

行内块级元素

行内块级元素对应的CSS样式设置为display: inline-block;。

特点

• 可以指定宽度和高度。
• 内外边距对于四个方向有效。
• 元素排在一行，但是会有空白缝隙。