In the CSS world, block-level elements are responsible for structure, while inline elements are responsible for text content. CSS was originally designed to mix text and text, so inline elements play a very important role in the CSS world. This chapter is divided into two chapters because of its extensive content. You can still get the information you need by subheading according to your interests.
1. The letter X and the CSS world baseline
To understand the inline element, we have to refer to the letter X, which gives the inline element its baseline, and hence its line-height and vertical-align. So before we move on, it’s important to understand one concept:
The bottom edge of the letter X is the baseline of the inline element!
Since x is so important, CSS gives it a special name called x-height. X-height is the height of the lowercase letter x. B: The baseline is 1/2*x-height, and the baseline is 1/2*x-height. C: The baseline is 1/2*x-height, and the baseline is 1/2*x-height, and the baseline is 1/2*x-height. Not every word/letter is the same height as the letter X, or most of them are different.
Because vertical-align:middle needs to be calculated based on x-height, CSS simply gives the x-height a name, further derived from the relative size unit ex, 1ex = x-height, so this unit will change with the change of font attribute. Very unstable, so not very good for sizing elements, but ex works quite well in some cases. We need the following effect
We need to add an inverted triangle at the end of the text. In this case, we need to align the text with the icon. Maybe vertical-align:middle, so that the text and the image are aligned on the middle line. Don’t we just have icon based on the baseline? So how do you make ICONS based on the baseline layout? Height: 1ex As follows:
<style>
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(/images/5/arrow.png) no-repeat center;
}
</style>
Copy the code2. Real “line boxes” in inline elements
Because the basic knowledge of the inlined box has not been well analyzed before, here is to add a basic content about the inlined box, which is helpful for learning the following knowledge. First we need to clarify two unofficial concepts: what is a row box and what does a row box do?
What is a line box? In fact I dare not say this is the official given a box model, the author does not mention, but he seems to exist in the real word of each line, and are in line as the calculating unit, namely each line (regardless of whether they an inline tag or anonymous generated), are automatically generated outside a “line box, box”. Note that this is just my opinion from the book, and I will continue to discuss whether the box was officially given in the ghost node. Maybe that’s not intuitive, but let’s do an example.
This is a paragraph I generated with the SPAN tag, which is automatically split into two lines by the browser, and you can see that each line of text is wrapped in a line box. So when do row boxes get generated? The first is the non-empty inline element. It’s important to note this non-empty element. The author always seems to ignore the empty element test. The second way is that the inline-block element is automatically generated internally. Notice that it can be empty. I don’t know why.
The second question is, what’s the use of row boxes? Why did the author propose the line box? Because it helps us understand a lot of things. Let’s start with the following test code and the results they generate.
<div style="background: yellow;">
<span style="line-height: 40px">We have high 40 px</span>
<span style="line-height: 60px">We have high 60 px</span>
<span style="line-height: 30px">We have high 30 px</span>
<span style="line-height: 90px">We have 90 px high</span>
</div>
Copy the code
The role of the div is like a line box, because it wraps a line box around it (there’s only one line here, but two lines are different). This is to give you a better idea of the resulting line box, which is 90px high, that is, the same line! The height of the line-box generated by the inline element depends on the element with the highest line-height. To give you a better idea of the result, let me show you another image with the same elements, this time with the width of the parent div compressed.
The final result is the same as the result of the test above, the first row is 60px high, the second row is 90px high, add the two “line box” to get the final 150px, should be enough impression of the line box!
3. The cornerstone of the inline element is line-height
Once you understand the concept of a line box, it’s much easier to look at line-height. As the cornerstone of the inline elements, line-height controls the height of the inline box completely. Note that I say completely controls the height of the inline box.
Consider the following question: an empty div is 0 in height. If you write a few words inside it, its height is spread. Where does this height come from? First of all, to be sure, is made up of new words, propped open with the inline elements, there is a close relatives, called “anonymous inline element” they outside parcel no inline element tag, but in fact they have the same performance with inline element, just can’t separate to define your own style (of course could come from the parent class to inherit some, although the weight of inheritance, But it’s better than nothing. Ok, so we know that this word is an anonymous inline element, so the height is supported by the height of the inline element, so what does the height of the inline element depend on? So let’s do two tests.
As the results show, the final height is line-height, not font size. Note that we are talking about purely inlined elements that are not replacement elements. The concept of replacement elements can be seen in previous articles. We mentioned that padding and border can affect the height of an element, but can they also affect the height of an inline element? The answer is no! But in some cases, there are some visual errors. The following test
<div style="background: yellow">
<span style="line-height: 40px; padding: 20px; border: 1px solid">I have the padding and the border</span>
</div>
Copy the codeSince the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)
So for purely inline elements, his height calculation depends only on line-height. Line-height === pure inline element height!!
[font = font-size] [font = top] [font = bottom] [font = top] [font = bottom] [font = top] [font = bottom] [font = top] For CSS, font size is known, so it only needs to calculate the half-line spacing. There is no need to go into how it is calculated. I’ll just say that this calculation results in a situation where the first and last lines of text are only half a line space above and below, and the middle is a line space. If you have high style requirements, you can consider this factor and use other ways to compensate for the height difference here.
4. Softness of line-height in block-level elements and inline replacement elements
Let’s move on to the role of line-height in block-level elements and inline replacement elements.
Let’s start with the simple, what role does line-height play in a block-level element? The answer is: nothing. Of course, the first example in point 3 of this chapter is to write line-height directly on a block-level element, so there is some effect. This effect is determined by the ubiquitous inheritance property of line-height, just as the anonymous inline elements within a block-level element cannot write their own styles. Then you have to inherit the parent’s line height, so line height still ends up working on inline elements, not block-level elements. The line-box boxes generated by the inline elements are then added together, spreading out the height of the block-level elements.
Since line-height doesn’t work in block-level elements, how does it work in inline replacement elements? I’ll conclude this after vertical-align.
5. Drill down into the values of the line-height attributes
The title of this section is confusing. What else does line-height have? No, line-height is just one value, but it can have different types.
The default value of line-height is normal, not none. Values, percentages, and specific lengths are also supported.
Normal is a variable that has different values in different browsers, so it is not possible to use the default normal attribute to restore the design. And because of the ubiquitous inheritance of line-height, you can sometimes change that property without even thinking about it, so the normal property can be left out (let’s just keep it practical).
In fact, we usually set line-height to a specific value, such as line-height:xx pixels. This approach is completely suitable for the delicate website with high requirements now, for the need to restore the design of the need for high fidelity, you can use specific values. , of course, also have a situation in which you can use the number or percentage, now there are a lot of web site have their own design standards, such as WeChat applet, ant – such as the design, they will demand the article inside the line height is 1.3 1.4 times the font size, the line of the post title: what is the size of how many times, in this case you can according to the design requirements, Write the line height in scale.
I only recommend using length values (1, 2, 3), not percentage values (100%, 200%). You might think 1 is 100%, but I think so too. In fact, there’s a big problem here.
Length values and percentage values are computed in exactly the same way. Font size* length/percentage (14*1.4 = 19.6 = 19px)
So what’s the difference between length and percentage? The answer is: inheritance, which is the ubiquitous inheritance difference in line height. Here’s an example:
<div class="box box-1">
<h3>The title</h3>
<p>content</p>
</div>
<div class="box box-2">
<h3>The title</h3>
<p>content</p>
</div>
<style>
.box { font-size: 14px; }
.box-1 { line-height: 1.5; }
.box-2 { line-height: 150%; }
</style>
Copy the codeThe results are shown below:
The result is different, the problem is this inheritance.
Use a numeric value, line-height = itself font size* numeric value
Use percentage, line-height = inherited line-height* value
You’ll find that one based on its own font size and one based on inherited line-height are completely different, and that in most cases the values are better and more realistic. So I personally recommend not using the percentage value of line-height, just forget about it.
6. “high value property” of inline element line-height
In fact, this problem cannot be simply understood as the maximization of the inline element line-height, which also contains the content of the “line box” mentioned before, as well as the ghost nodes generated by the line box. Before we explore the large value property, we need to know what a ghost node is. Let’s look at a concrete example:
<html>
<head>
<title></title>
</head>
<body>
<div style="background: yellow"><span style="display: inline-block;"></span></div>
</body>
</html>
Copy the codeNote that this code must be declared. The result of this code is:
The span tag does have a height of 0, so what exactly separates the height of div? This is the “ghost blank node” mentioned above. You can imagine that the ghost blank node is a blank node with no width. Of course, you don’t have to look for it in the DOM structure. Before I can understand the ghost blank node, I need to know when the ghost blank node will appear. According to my tests, the result is the same as described by the author.
Generates a ghost blank node automatically in front of a row box. As mentioned earlier, inline-block elements can generate ghost empty nodes inside, so there is indeed an invisible inline element that has its own line-height.
Font-size (default: 12px) * normal; font-size: 12px; font-size: 12px; So now it all makes sense.
Once you’ve done all your homework and done a final review and check, you really understand the inline element line-height by understanding the following example.
<div class="box box1">
<span>span: line-height:20px</span>
</div>
<div class="box box2">
<span>span: line-height:96px</span>
</div>
<style>
.box {
width: 280px;
margin: 1em auto;
outline: 1px solid #beceeb;
background: #f0f3f9;
}
.box1 {
line-height: 96px;
}
.box1 span {
line-height: 20px;
}
.box2 {
line-height: 20px;
}
.box2 span {
line-height: 96px;
}
</style>
Copy the codeSince the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)
The two boxes above end up with the same height. Why is that?
Box1 >span has a line height of 20px, but it lives next door to a ghost space node that inherits its parent element’s line height:96px. We already know that the height of the line-box is determined by the height of the highest inline element, so the final height of box1 is the same as box2, both 96px.
There is too much content in this chapter, so vertical-align will be discussed in the next chapter. After learning vertical-align, we will look at how to combine the two to realize the vertical center display of multi-line elements. If you are interested, you can pay attention to the following article, click “pay attention”.
Never forget why you started, and your mission can be accomplished.
You can also scan the QR code to enter the blogger’s fan group (708637831). Of course, you can also scan the QR code to reward and directly keep a handsome blogger.
