Display mode of elements in CSS

In CSS, element tags are divided into two categories according to the different element display modes: inline-level elements and block-level elements.

1. First, let’s introduce what are inline elements and what are block-level elements?

1.1, Inline elements are elements that do not occupy a single line, for example: span buis strong em ins del, etc.

1.2, block-level elements are elements that occupy a single line, such as p div h ul ol dl li dt dd, etc.

2. What are the differences between inline elements and block-level elements?

2.1, inline elements will not occupy a single line, but block-level elements will occupy a single line;

2.2. The width and height of inline elements cannot be set. Their width and height will change as the text changes. Block-level elements can set width and height.

If the width and height are not set, by default, the width is the same as the parent element and the height is 0;

2.3, the following example shows the difference between inline and block level by setting styles for inline element span and block level element div

 <style>
        span{
            height: 200px;
            width: 300px;
            background-color: red;
            font-size: 40px;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: green;
            margin: 100px auto;
        }
        .son{
            background-color: blue;
        }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display mode of CSS elements</title>
</head>
<body>
    <span>I am span</span>
    <div class="father">
        I am father
        <div class="son">I am son</div>
    </div>
</body>
</html>

3. Sometimes we not only need to set the width and height of an element, but also hope that the element will not occupy a single line. In this case, inline-block elements appear. Common inline-block elements include <img>/<input>/<td>, etc.

4. How to switch the display mode of CSS elements?

4.1, Set the display attribute of the element

4.2, display value: inline (inline), block (block level), inline-block (inline block level)

4.3, the following example converts the display mode of span to block level, converts the display attribute of div to inline block level, and converts the display mode of img to block level

<style>
        /*Convert span to a block-level element--*/
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display: block;
            background-color: red;
            width: 400px;
            height: 400px;
        }
        /*Convert div to inline block-level element*/
        div{
            display: inline-block;
            background-color: green;
            width: 300px;
            height: 300px;
        }
        /*Convert img to a block-level element*/
        img{
            display: block;
            width: 200px;
        }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display mode of CSS elements</title>
</head>
<body>
    <span>I am span</span>
    <div>I am div</div>
    <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg">

</body>
</html>

Summarize

This is the end of this article about the display mode of elements in CSS. For more relevant CSS display mode content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: HTML hyperlink style (four different states) setting example

>>: Introduction to MIME encoding (integrated from online information and practical experience)