胡熙国

行内元素和块级元素

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

行内元素

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

特点

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

示例

<span>行内元素1</span>
<!-- 排列在一行 -->
<span>行内元素2</span>
<!-- 排列在一行 -->
<span>行内元素3</span>
<!-- 排列在一行 -->
<style type="text/css">
  span {
    width: 1000px; /* 指定宽度无效果 */
    height: 1000px; /* 指定高度无效果 */
    color: #333;
    background: #eee;

    padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */
    margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
  }
</style>

常见行内元素

<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>块级元素1</div>
<!-- 独占一行 -->
<div>块级元素2</div>
<!-- 自动换行 -->
<style type="text/css">
  div {
    width: 100px; /* 不指定则默认宽度100% */
    height: 100px; /* 可以指定高度 */
    color: #333;
    background: #eee;

    padding: 10px 20px; /* padding的设置在四个方向都有效 */
    margin: 10px 20px; /* margin的设置在四个方向都有效 */
  }
</style>

常见块级元素

<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;。

特点

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

示例

<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<style type="text/css">
  input {
    width: 100px; /* 可以指定宽度 */
    height: 100px; /* 可以指定高度 */

    padding: 10px 20px; /* padding的设置在四个方向都有效 */
    margin: 100px 20px; /* margin的设置在四个方向都有效 */
  }
</style>

常见行内块级元素

<input>、<img>、<button>、<iframe>、<textarea>、<select>。

代码示例

<!DOCTYPE html>
<html>
  <head>
    <title>行内元素与块级元素</title>
    <style type="text/css">
      div {
        width: 100px; /* 不指定则默认宽度100% */
        height: 100px; /* 可以指定高度 */
        color: #333;
        background: #eee;

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 10px 20px; /* margin的设置在四个方向都有效 */
      }

      span {
        width: 1000px; /* 无法指定宽度 */
        height: 1000px; /* 无法指定高度 */
        color: #333;
        background: #eee;

        padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */
        margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
      }

      input {
        width: 100px; /* 可以指定宽度 */
        height: 100px; /* 可以指定高度 */

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 100px 20px; /* margin的设置在四个方向都有效 */
      }
    </style>
  </head>
  <body>
    <section>
      <div>块级元素1</div>
      <!-- 独占一行 -->
      <div>块级元素2</div>
      <!-- 自动换行 -->
    </section>

    <section>
      <span>行内元素1</span>
      <!-- 排列在一行 -->
      <span>行内元素2</span>
      <!-- 排列在一行 -->
      <span>行内元素3</span>
      <!-- 排列在一行 -->
    </section>

    <section>
      <input /><!-- 排列在一行 -->
      <input /><!-- 排列在一行 -->
      <input /><!-- 排列在一行 -->
    </section>
  </body>
</html>
贡献者: huxiguo