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

Detailed explanation of server-id example in MySQL master-slave synchronization

Preface When we build a MySQL cluster, we natural...

MySQL 5.7.24 compressed package installation and configuration method graphic tutorial

This article shares the installation tutorial of ...

Troubleshooting the cause of 502 bad gateway error on nginx server

The server reports an error 502 when synchronizin...

MySQL 8.0.12 installation graphic tutorial

MySQL8.0.12 installation tutorial, share with eve...

What magical uses does CSS filter have

background Basic Concepts CSS filter property app...

How to count down the date using bash

Need to know how many days there are before an im...

Advanced techniques for using CSS (used in actual combat)

1. The ul tag has a padding value by default in Mo...

A universal nginx interface to implement reverse proxy configuration

1. What is a proxy server? Proxy server, when the...

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

1. Time difference functions (TIMESTAMPDIFF, DATE...

Example operation MySQL short link

How to set up a MySQL short link 1. Check the mys...

How to install pyenv under Linux

Prerequisites Need to install git Installation St...

js to call the network camera and handle common errors

Recently, due to business reasons, I need to acce...

Mysql example of splitting into multiple rows and columns by specific symbols

Some fault code tables use the following design p...

MySQL Billions of Data Import, Export and Migration Notes

I have been taking a lot of MySQL notes recently,...

Summary of the use of Datetime and Timestamp in MySQL

Table of contents 1. How to represent the current...