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

Differences between Windows Server 2008R2, 2012, 2016, and 2019

Table of contents Common version introduction Com...

Vue achieves the top effect through v-show

html <div class="totop" v-show="...

Analysis of the usage of process control functions/statistical functions/grouping queries in MySql

The road ahead is long and arduous, but I will co...

WeChat applet custom tabBar step record

Table of contents 1. Introduction 2. Customize ta...

js handles account logout when closing the browser

Table of contents Classic approach question Furth...

js to implement a simple bullet screen system

This article shares the specific code of native j...

MySQL 5.7.20 compressed version download and installation simple tutorial

1. Download address: http://dev.mysql.com/downloa...

Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)

The general way of writing is as follows: XML/HTM...

Install OpenSSH on Windows and log in to the Linux server by generating an SSH key

The full name of SSH is Secure SHell. By using SS...

How to run Hadoop and create images in Docker

Reinventing the wheel, here we use repackaging to...

nuxt.js multiple environment variable configuration

Table of contents 1. Introduction 2. Scenario 3. ...

How to install and configure MySQL 8.0.12 decompressed version under Windows 10 with graphic tutorials

This article records the installation and configu...

The latest super detailed graphic tutorial of installing Kali Linux on virtual machine VMware

Table of contents 1. Download the system image fi...

Docker online and offline installation and common command operations

1. Test environment name Version centos 7.6 docke...

MySQL 5.7.17 installation and configuration method graphic tutorial under Windows 10

In this article, I will explain in detail how to ...