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

Comprehensive analysis of optimistic locking, pessimistic locking and MVCC in MySQL

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

Comprehensive analysis of optimistic locking, pessimistic locking and MVCC in MySQL

How to modify the root password of mysql in docker

MySQL foreign key (FOREIGN KEY) usage case detailed explanation

How to use xshell to connect to Linux in VMware (2 methods)

Linux user script creation/guessing game/network card traffic monitoring introduction

Usage of the target attribute of the html tag a

This article summarizes the specific use of CSS two-column layout and three-column layout

10 Website Usability Tips Everyone Should Know

HTML form tag tutorial (3): input tag

Solution to the Mysql ERROR 1045 (28000): Access denied for user root@localhost problem in Ubuntu system

Recommend

How to install MySQL 8.0.13 in Alibaba Cloud CentOS 7

Summary of online MYSQL synchronization error troubleshooting methods (must read)

Realization of real-time file synchronization between Linux servers

How to use Chrome Dev Tools to analyze page performance (front-end performance optimization)

Solution to MySQL connection exception and error 10061

Some indicators of excellent web front-end design

Example of creating circular scrolling progress bar animation using CSS3

js+canvas realizes code rain effect

Detailed explanation of Vuex environment

MySQL high availability solution MMM (MySQL multi-master replication manager)

How to use mysqldump to backup MySQL data

Summary of some common writing methods that cause MySQL index failure

Install ethereum/Ethereum from scratch under CentOS7

Detailed tutorial on how to automatically install CentOS7.6 using PXE

Detailed operations of building RabbitMq's common cluster and mirror cluster with Docker