Introduction to the usage of vertical-align and line-height in CSS

(1), put a picture in a P block, the p block background color is set to aquamarine. You will find a certain gap between the picture and the lower edge of the P block.

Instance:

　　　　　

The code is as follows:

<! DOCTYPE html>

(2), in the P block after the picture into a span tag, the content is xxxx!, you will find the span tag element and the picture is in the bottom line to it, when the span plus a background, you can see the bottom of the picture is the letter X is aligned with the bottom.

Instance:
　　

Example: After magnification can be clearly seen!

　　　　　　

The code is as follows:

<! DOCTYPE html>

Why is this happening?

A: The reason is that inline elements are affected by default vertical-align (vertical alignment) and line-height (row height), whereas vertical-align default alignment is baseline, which is baseline alignment. This baseline is the lower edge of the letter x in the span tag, so the bottom of the picture is relative to the bottom of the letter (not aligned with the background of the span tag). And because the letter itself has a line-height (row height) value, the span label plus the background is higher than the letter.

Workaround:(any of the four methods can solve the problem)

(1), the entire P font-size is set to 0;

(2), the image IMG into block-level elements, that is, set it to Display:block;

(3), give p set a line height (value as small as possible), set to line-height:5px;

(4), set the picture img Vertical alignment Vertical-align, the value is top/middle/bottom any one can (in order to override the default value baseline);

The effect is as follows:

 　

The complete code is as follows:

<! DOCTYPE html>



2, the picture vertical center problem

Adding the following attributes and attribute values to P and IMG allows the picture to be centered vertically in the P block.

<style type= "Text/css"   ... p{       line-height:500px;       font-size:0px;   }   img{       vertical-align:middle;   }   ...   <style>

　

The code is as follows:

<! DOCTYPE html>

This article on the CSS Vertical-align and line-height usage is small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.