Shulou(Shulou.com)06/03 Report--

What is the introduction to the use of vertical-align? aiming at this problem, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Preface

Recently, I have been a little obsessed with learning CSS. CSS has always been my weakness. I did not expect that I could calm down and learn so much about CSS recently, which is really commendable.

As the saying goes, if you're not crazy, you can't become a demon. I've been a little crazy about swords lately.

Sometimes after studying at night, I slept very shallow all night. I felt that it was raining, but the rain was all html tags!

I saw a picture in the mobile phone in the elevator. I smiled strangely, because I seemed to see his layout!

So, my wand, yes, this is a sign of enchantment! Everything has its limits, and the excesses before have led to my problems today.

I don't know what to learn today. Learning is like sailing against the current, so we should all keep our mind at ease, take a look at it again, and build our CSS worldview together.

CSS layout (1)

Vertical-align

Yes, the protagonist of this article is this guy. In fact, I mentioned this guy again and again before, but today I found it out again, because I found that I still don't know enough about him.

Figures

Vertical-align: 2px

This means that the element is offset upward by 2px relative to the baseline, so we will encounter the baseline again. What is the baseline?

I'm embarrassed to steal a picture here, so just draw one yourself:

Know that god horse is the baseline, although the old man has not written for a long time, but unexpectedly still so wandering!

Percentage

The percentages we encountered before, such as width/height, are relative to the parent element, where font-size is relative to the last element that owns the attribute, and vertical-align is relative to the line-height of the tag.

Here are two examples:

This is a good girl, so we change the code:

PS: I made a mistake of using vertical-align on div. Please don't be like me.

The code is as follows:

Div {margin: 10px; border: 1px solid black;}

Span {margin: 10px; border: 1px solid black; line-height: 20px;}

Ye Xiao Chai is crazy about swords.

Ye Xiao Chai is crazy about swords.

There are a lot of things to pay attention to and see in this area, so I suggest you try it.

You will find that the height of div will change with it!

Come on, let's discuss this problem together. Hey, let me give an example here:

Let's take a look at this example. I set it to a negative value here, and the in-line elements go outside the block-level elements.

What's more interesting is that we have two in-line elements in a block-level element, and we can stretch out the block-level elements!

When there are two inline elements, setting a higher or lower value for one of the vertical-align will cause the block-level element to become higher! Why is that?

In fact, it is a bit difficult to understand that it is easy to say and difficult to say. We imagine one of the boxes going up and the other down (relative to the baseline), so the whole block-level box is higher!

This is the answer to the question about the introduction to the use of vertical-align. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.