<p class="p1"> tsuiling 測試 line-height: normal (預設) </p> <p class="p2"> tsuiling 測試 line-height: normal (預設) </p> <p class="p3"> tsuiling 測試 line-height: normal (預設) </p>
p { background-color: lightskyblue; } .p1 { line-height: normal; } .p2 { line-height: 1; } .p3 { line-height: 1em; }
tsuiling 測試 line-height: normal (預設)
tsuiling 測試 line-height: 1 (設定1倍)
tsuiling 測試 line-height: 1em (設定1個字體高)
<div class="b1"> <span>ABC</span> <img src="../img/images/flower/f1.jpg" alt=""> </div>
.b1 { background-color: lightskyblue; text-align: center; } .b1 span { background-color: greenyellow; }
<div class="b2"> <span>ABC</span> <img src="../img/images/flower/f1.jpg" alt=""> </div>
.b2 { background-color: lightskyblue; text-align: center; line-height: 100px; }
.b2 span { background-color: greenyellow; }
<div class="b3"> <span>ABC</span> <img src="../img/images/flower/f1.jpg" alt=""> </div>
.b3 { background-color: lightskyblue; text-align: center; }
.b3 span { background-color: greenyellow; }
.b3 img { vertical-align: middle; }
.b4 { background-color: lightskyblue; }
.b4 img { vertical-align: middle; }