Detailed explanation of the minimum width value of inline-block in CSS

Detailed explanation of the minimum width value of inline-block in CSS

Preface

Recently, I have been taking some time in the evening to read the book "CSS World". This book is very interesting and made me realize that CSS is not as simple as a few attribute styles. Yesterday I saw that in an inline block element, if the width is set to 0, the content in the element tag has a minimum width. The minimum width is different for Chinese characters and English characters. Chinese characters are divided by each Chinese character, and English characters are divided by English words.

The beginning of the article

The book gives an example of convex and concave, but does not explain it in detail. Below I will explain this code in detail.

Code Operation

<style>
        .ao ,.tu{
            display: inline-block;
            width: 0;
            font-size: 14px;
            line-height: 18px;
            margin: 35px;
            color: skyblue;
        }
        .ao:before,
        .tu:before{
            /* The style outside the border plays a prominent role, outline-color/style/width */
            outline: 2px solid #cd0000;
            /* Specifies the font family of an element*/
            font-family: Consolas, Monaco, monospace;
        }
        .ao:before{
            content: "love you love";
        }
        .tu{
            /* Text direction from left to right, for reverse direction*/
            direction: rtl;
        }
        .tu:before{
            content: "I love you"
        }
    </style>
</head>
<body>
    <div>
        <span class="ao">I love mother</span>
        <span class="tu">I don't love you</span>
        <span>I love you</span>
    </div>
</body>

Results

Code Interpretation

Two span tags are used to show the concave and convex effects. The span tag is an inline element. If you are not familiar with the three styles, I will explain them later in the article.

1. First, convert it into an inline block element through display. The width is then set to 0 so that the span element has a minimum width.

2. Use a common pseudo-element before for the two pseudo-elements. Different contents of the pseudo-elements will have different line breaks, the outer border style will be red, and the font style will be specified.
Why do we need to use pseudo-elements? Can't we set them directly without pseudo-elements? I tried it again with this question in mind, and found that when pseudo-elements were not used, the text was displayed concave and convex, but the border was not, and the text would overlap and overlap. The reason for this has not been figured out yet, you can take a look and discuss it.

direction: rtl; is to make the text direction from right to left, and the protruding part is aligned with the concave opening.

3. The following "I love mother, but I don't love you" will be displayed after the content of the before element according to the bottom width value of the inline block element.

Tag classification

Block-level elements

<address> defines the address
<caption> defines the table title
<dd> defines an entry in the definition list
<div> defines a division or section in a document
<dl> Definition List
<dt> defines the items in the list
<fieldset> defines a frameset
<form> creates an HTML form
<h1> defines the largest heading
<h2> defines a subtitle
<h3> defines the title
<h4> defines the title
<h5> defines the title
<h6> defines the smallest heading
<hr> creates a horizontal line
The <legend> element defines a title for the fieldset element.
The <li> tag defines a list item
<noframes> Displays text for browsers that do not support frames, inside a frameset element
<noscript> defines alternative content when the script is not executed
<ol> defines an ordered list
<ul> defines an unordered list
The <p> tag defines a paragraph
<pre> defines preformatted text
The <table> tag defines an HTML table
<tbody> tag table body (text)
<td> Standard cell in a table
<tfoot> defines the footer of the table (footnote or table note)
<th> defines the header cell
The <thead> tag defines the table header
<tr> defines a row in a table

Inline elements

The <a> tag defines an anchor
<abbr> indicates an abbreviation
<acronym> defines only the initials of an acronym
<b> bold font
<bdo> can override the default text direction
<big> Large bold font
<br> Line break
<cite> cites the definition
<code> defines computer code text
<dfn> defines a definition item
<em> is defined as emphasized content
<i> Italic text effect
<img> embeds an image into a web page
<input> Input box
<kbd> defines keyboard text
The <label> tag defines a label (mark) for the input element
<q> defines a short quote
<samp> defines sample text
<select> creates a single-select or multi-select menu
<small> renders a small font
<span> Combines inline elements in a document // This example uses span
<strong> Stronger emphasis
<sub> defines subscript text
<sup> defines superscript text
<textarea> Multi-line text input control
<tt> Typewriter or monospaced text effect
<var> defines a variable

Inline block elements

<button> Button
<del> defines text that has been deleted in the document
<iframe> creates an inline frame (i.e., an inline frame) that contains another document
The <ins> tag defines text that has been inserted into the document.
<map> Client-side image map (i.e. hotspot)
<object> object
<script> Client-side script

End of the article

To sum it up in one sentence, when the width of an inline block element is 0, the content inside the element has a minimum width value. You can also give it a try. If you have any questions, please leave a message in the comment area and learn together.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Implementation of Mysql User Rights Management

>>:  More popular and creative dark background web design examples

Recommend

Solution to many line breaks and carriage returns in MySQL data

Table of contents Find the problem 1. How to remo...

MySQL uses UNIQUE to implement non-duplicate data insertion

SQL UNIQUE constraint The UNIQUE constraint uniqu...

How to deploy Angular project using Docker

There are two ways to deploy Angular projects wit...

How to set the style of ordered and unordered list items in CSS

In an unordered list ul>li, the symbol of an u...

Implementation of CSS loading effect Pac-Man

emmm the name is just a random guess 2333 Preface...

Three notification bar scrolling effects implemented with pure CSS

Preface The notification bar component is a relat...

Detailed tutorial on installing Docker and docker-compose suite on Windows

Table of contents Introduction Download and insta...

Solution to the problem that crontab output redirection does not take effect in Linux

question In LINUX, periodic tasks are usually han...

HTML table markup tutorial (43): VALIGN attribute of the table header

In the vertical direction, you can set the alignm...

Detailed explanation of Nginx timed log cutting

Preface By default, Nginx logs are written to a f...

jQuery implements ad display and hide animation

We often see ads appear after a few seconds and t...

Example of Vue uploading files using formData format type

In Vue, we generally have front-end and back-end ...

Summary of MYSQL full backup, master-slave replication, cascading replication, and semi-synchronization

mysql full backup 1. Enable binary log and separa...

Detailed explanation of the front-end method of passing parameters between HTML pages

A situation that often occurs in a project is tha...

How to use & and nohup in the background of Linux

When we work in a terminal or console, we may not...