Inline Elements and Block Elements

HTML can classify elements into three types: inline elements, block elements, and inline-block elements. These types can be converted to each other using the display property in CSS.

Inline Elements

The corresponding CSS style for inline elements is display: inline;.

Characteristics

  • Elements are displayed in a line.
  • They do not automatically wrap to the next line when closed.
  • Height and width cannot be specified.
  • Height can be specified using line-height.
  • Margin is effective in the horizontal direction but not in the vertical direction.
  • Padding is effective in the horizontal direction and has a visual effect in the vertical direction, but it does not affect other elements.

Example

<span>Inline Element 1</span> <!-- Displayed in a line -->
<span>Inline Element 2</span> <!-- Displayed in a line -->
<span>Inline Element 3</span> <!-- Displayed in a line -->
<style type="text/css">
    span{
        width: 1000px; /* Width has no effect */
        height: 1000px; /* Height has no effect */
        color: #333;
        background: #eee;

        padding: 100px 20px; /* Padding is effective in the horizontal direction and has a visual effect in the vertical direction, but it does not affect other elements */
        margin: 100px 20px; /* Margin is effective in the horizontal direction but not in the vertical direction */
    }
</style>

Common Inline Elements

<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>.

Block Elements

The corresponding CSS style for block elements is display: block;.

Characteristics

  • Each element occupies a separate line.
  • They automatically wrap to the next line when closed.
  • The default width is 100%.
  • Width and height can be specified.
  • Margin and padding are effective in all four directions.

Example

<div>Block Element 1</div> <!-- Occupies a separate line -->
<div>Block Element 2</div> <!-- Automatically wraps to the next line -->
<style type="text/css">
    div{
        width: 100px; /* If not specified, the default width is 100% */
        height: 100px; /* Height can be specified */
        color: #333;
        background: #eee;

        padding: 10px 20px; /* Padding is effective in all four directions */
        margin: 10px 20px; /* Margin is effective in all four directions */
    }
</style>

Common Block Elements

<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>.

Inline Block Elements

The display: inline-block; CSS style is used for inline block elements.

Characteristics

  • Width and height can be specified.
  • Margin and padding are effective in all four directions.
  • Elements are arranged in a line, but there will be white spaces between them.

Example

<input /><!-- Arranged in a line -->
<input /><!-- Arranged in a line -->
<input /><!-- Arranged in a line -->
<style type="text/css">
    input{
        width: 100px; /* Width can be specified */
        height: 100px; /* Height can be specified */

        padding: 10px 20px; /* Padding is effective in all four directions */
        margin: 100px 20px; /* Margin is effective in all four directions */
    }
</style>

Common Inline Block Elements

<input>, <img>, <button>, <iframe>, <textarea>, <select>.

Code Example

<!DOCTYPE html>
<html>
<head>
    <title>Inline Elements vs Block Elements</title>
    <style type="text/css">
        div{
            width: 100px; /* Default width is 100% if not specified */
            height: 100px; /* Height can be specified */
            color: #333;
            background: #eee;

            padding: 10px 20px; /* Padding is effective in all four directions */
            margin: 10px 20px; /* Margin is effective in all four directions */
        }

        span{
            width: 1000px; /* Width cannot be specified */
            height: 1000px; /* Height cannot be specified */
            color: #333;
            background: #eee;

            padding: 100px 20px; /* Padding is effective in the horizontal direction, but only has visual effect in the vertical direction and has no effect on other elements */
            margin: 100px 20px; /* Margin is effective in the horizontal direction, but has no effect in the vertical direction */
        }

        input{
            width: 100px; /* Width can be specified */
            height: 100px; /* Height can be specified */

            padding: 10px 20px; /* Padding is effective in all four directions */
            margin: 100px 20px; /* Margin is effective in all four directions */
        }


    </style>
</head>
<body>

    <section>
        <div>Block Element 1</div> <!-- Takes up a whole line -->
        <div>Block Element 2</div> <!-- Automatically wraps to the next line -->
    </section>


    <section >
        <span>Inline Element 1</span> <!-- Arranged in a line -->
        <span>Inline Element 2</span> <!-- Arranged in a line -->
        <span>Inline Element 3</span> <!-- Arranged in a line -->
    </section>

```html
<section>
    <input /><!-- Arranged in one line -->
    <input /><!-- Arranged in one line -->
    <input /><!-- Arranged in one line -->
</section>


</body>
</html>

Daily Question

https://github.com/WindrunnerMax/EveryDay

References

https://developer.mozilla.org/en-US/docs/Web/HTML https://blog.csdn.net/zhanglir333/article/details/79178370 https://www.jeffjade.com/2015/06/24/2015-06-24-css-block-inline/