inline-height

inline-box study

by muxiaobai

HTML

<div style="background-color:#ccc;">
        <span style="font-size:3em;background-color:#999;">中文Englishx</span>
        <span style="font-size:3em;background-color:#999;">English中文x</span>
    </div>
    <br/>
	<div style="background-color:#ccc;">
        <span style="font-size:1em;background-color:#666;">中文English</span>
        <span style="font-size:3em;background-color:#999;">中文English</span>
        <span style="font-size:3em;background-color:#999;">English中文</span>
        <span style="font-size:1em;background-color:#666;">English中文</span>
    </div>
    <br/>
    <div style="width:400px;height:100px;background: #ccc;text-align: center;">
        <span style=" line-height:100px;">
        单行让line-heigth和box的heigth相同即可</span>
    </div>
    <br/>
    <div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;">
                <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">多行<br/>
                        display:inline-block;
                </span>
            </div>

CSS

span{
      padding:0px;
      line-height:1.5;
    }