Usage analysis of display: inline-block in CSS

The content of this article is about the usage analysis of display: inline-block in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Mysterious Gap

We create a navigation list and set its list item to inline-block. The main code is as follows:

<div>
  <div><a>我</a></div>
  <div><a>我</a></div>
  <div><a>我</a></div>
</div>
.nav {
  background: #999;
}
.nav-item{
  display:inline-block; /* 设置为inline-block */
  width: 100px;
  background: #ddd;
}

Effect The picture is as follows:

#We can see from the rendering that there is a small gap between the list items, but we have not set the margin horizontal spacing in the code. So how did this gap arise?

This is because when we write code, entering spaces and newlines will generate whitespace characters. The browser will not ignore whitespace characters, and the browser will automatically merge multiple consecutive whitespace characters into one, so a so-called gap is generated.

For the above example, we entered a carriage return and line feed between the list item elements to facilitate reading, and this gap is the blank character generated by this carriage return and line feed.

Similarly for all inline elements (inline, inline-block), line breaks will produce white space gaps.

How to eliminate whitespace characters

From the above we understand that whitespace characters are normal behavior of browsers. But for some scenes, it is not beautiful, and the size of the gap is not controllable, so we often need to remove this blank gap. Generally speaking, we have two methods to remove the gap caused by this line break: code without line breaks and setting font-size.

Code does not wrap

We learned that line breaks are caused by line breaks, so we can write the list item in the above example into one line, so that the white spaces disappear and the gap is no longer exists. The code is as follows:

<div>
  <div>导航</div>
<div>导航</div>
<div>导航</div>
</div>

However, considering the readability and maintainability of the code, we generally do not recommend writing it in one line.

Set font-size

First of all, we must understand that the whitespace character is ultimately a character. Therefore, we can control the size of the gap generated by setting the font-size attribute. We know that if font-size is set to 0, text characters cannot be displayed, then the blank characters will also be gone, and the gap will be gone.

So there is another solution following this idea: remove this gap by setting the font-size of the parent element to 0, and then reset the font-size of the child element to restore the text of the child element. character.

So the code of this method is as follows:

.nav {
  background: #999;
  font-size: 0; /* 空白字符大小为0 */
}
.nav-item{
  display:inline-block;
  width: 100px;
  font-size: 16px; /* 重置 font-size 为16px*/
  background: #ddd;
}

When using this method, you need to pay special attention to the fact that the font-size of its sub-elements must be reset, otherwise it is easy to fall into the pit (the text will not be displayed) .

Alignment issues

Since inline-block is an inline-level element, the vertical-align attribute also applies to it.

Before we formally explain vertical-align, we need to talk about some basic concepts.

Middle line, baseline, top line, bottom line

Middle line (middle), baseline (baseline), top line (text-top, bottom line (text-bottom)) are several basic elements of text. Line, its corresponding position is as shown below:

• Baseline (base line): the lower edge of the lowercase English letter x.

• Middle line: the middle of the lowercase English letter x.

• Top line (text-top): The top of a content area composed of the font-size size of the parent element

• Bottom line (text- bottom): The bottom of a content area composed of the font-size size of the parent element

• vertical-align value

vertical-align only Accepts 8 keywords, a percentage value, or a length value. Next we'll look at how each keyword works on inline elements.

1. baseline The default element's baseline is aligned with the parent element's baseline.

2. sub Aligns the element's baseline with the subscript baseline of its parent element.

3. super Aligns the element's baseline to its parent's superscript - baseline.

4. text-top Aligns the top of the element with the font top of the parent element.

5. text-bottom Aligns the bottom of the element with the bottom of the parent element's font.

6. middle Aligns the middle of the element to the baseline plus half the x-height of the parent element.

7. top Aligns the top of the element and its descendants to the top of the entire row.

8. bottom Aligns the bottom of the element and its descendants to the bottom of the entire row.

9. Aligns the element's baseline to a given length above the baseline of its parent element.

10. Like the value, the percentage is the percentage of the line-height property

##

The above is the detailed content of Usage analysis of display: inline-block in CSS. For more information, please follow other related articles on the PHP Chinese website!