一、vertical-align
vertical-align to the specified line is the vertical alignment of the cell element or elements in the table
vertical-align property can be used in both environments:
- Box model elements vertically aligned therewith so that the container element row line. Photos in a vertically aligned line of text <img>
- Vertical alignment of table cell content:
Note: vertical-align only the inline elements, table cells commencement elements: block-level element not in vertical alignment with it
<!DOCTYPE html> <html> <style> .bg { background-color: lightblue; border: black solid 1px; } .bg span{ background-color: lightgreen; } </style> </head> <body> <div class="bg"> <img src="hello.jpg" alt=""> <span class="span1">abc</span> <span class="span2">abc</span> </div> </body> </html>
Inline elements in one row are arranged in order, but when the outer div to add a background color and border problem found
Below the picture appears blank, which is due to vertical-align attribute of the img element in default baseline, baseline and baseline mean baseline of the parent element of the elements align the baseline of the parent element letters abc lower edge (line), but like pictures or this input box element, does not have a baseline, the baseline sucked parent element and its lower end alignment.
The height of the space below the picture is how to determine it?
In fact, the distance between the baseline and baseline character bottom, and this distance is determined by the line-height, line-height default is normal, normal is usually understood to be 1, or 1.2,
In CSS, property line-height distance between the two pieces of text, the line is high, if we set the line-height is the height of the parent vessel a piece of text can be centered vertically of a Text
