Front-end basic knowledge learning - attribute vertical-align

vertical-align

Used to set the vertical alignment of an element, only for inline elements or inline block elements

attribute value	describe
baseline	align with baseline
top	align top
niddle	center alignment
bottom	Bottom alignment

align elements

When span2 wants to align with the top, middle, and bottom of span1, you need to add the same vertical-align to the internal elements

<style>       
        .box1 {
    
    height:200px;border:10px solid #000;text-align:center;}
        .span1 {
    
    
            width: 100px;
            height: 200px;
            background: red;
            display: inline-block;
            vertical-align: middle;
        }
        .span2 {
    
    
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
            vertical-align:middle;
        } 
    </style>
 <div class="box1">
        <span class="span1"></span>
        <span class="span2"></span>
    </div>

icon

Remove image, li bottom gap

For inline-block elements such as pictures or forms, its bottom line will be aligned with the baseline of the parent box. This will cause a problem, that is, there will be a blank gap on the bottom side of the image.
Set vertical:center|top|bottom and so on for img and li. Just don't let the img align with the default baseline (baseline).

 <style>    
        .box2{
    
    border:10px black;background-color:aqua;}
        .img{
    
    vertical-align:top;}
    </style>
 <div class="box2">
        <img class="img" src="37.png" alt="Alternate Text" />
        <img class="img" src="37.png" alt="Alternate Text" />
    </div>

icon

  <style>
        /*
        在IE6、7下li下几个px间隙问题：在IE6、7下li本身没有浮动，但是内容浮动li下就会多出几个px
            解决办法：给li加vertical-align:top;
        */
        ul {
    
    margin:0;padding:0;list-style:none;        }
        a {
    
    text-decoration:none;   float:left;     }
        .list {
    
    width:300px;        }
            .list li {
    
    
                height: 30px;
                border: 1px solid #000;
                vertical-align: top;
            }
        span{
    
    float:right}
    </style>
     <ul class="list">
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
    </ul>