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)

Nginx learning how to build a file hotlink protection service example

A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode

XML/HTML CodeCopy content to clipboard < butto...

Display mode of elements in CSS

Nginx learning how to build a file hotlink protection service example

Detailed explanation of mysql deadlock checking and deadlock removal examples

MySQL updates a field in a table to be equal to the value of a field in another table

How to develop uniapp using vscode

MySQL installation tutorial under Centos7

Fall in love with the simple CSS details, although insignificant, can improve efficiency

DD DT DL tag usage examples

In-depth analysis of the Identifier Case Sensitivity problem in MySQL

How to operate json fields in MySQL

Linux system repair mode (single user mode)

Recommend

MySQL transaction, isolation level and lock usage example analysis

Solution to the data asymmetry problem between MySQL and Elasticsearch

An example of how to optimize a project after the Vue project is completed

MySQL 5.7.27 installation and configuration method graphic tutorial

Simple Implementation of HTML to Create Personal Resume

MySQL startup error InnoDB: Unable to lock/ibdata1 error

web.config (IIS) and .htaccess (Apache) configuration

Detailed explanation of important cascading concepts in CSS

Best Practices for Implementing Simple Jira Projects with React+TS

Implementation of services in docker accessing host services

How to draw a cool radar chart in CocosCreator

80 lines of code to write a Webpack plugin and publish it to npm

mysql8.0.20 download and installation and problems encountered (illustration and text)

HTML/CSS Basics - Several precautions in HTML code writing (must read)

A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode