inline-block容器的高度撐開位置

時間 2019-11-09

標籤 inline block 容器高度撐開位置简体版

原文原文鏈接

block的高度是從最上面撐開的html

那麼inline-block呢？spa

直接上代碼code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    #test {
        line-height: 0;
        font-size: 80px;
        background-color: gray;
    }
    #test span {
        display: inline-block;
        background-color: red;
        height: 1px;
        width: 150px;
    }
    #s1 {
        
    }
    #s2 {
        line-height: 1;
    }
</style>
</head>

<body>
<div style="height: 100px;"></div>
<div id="test">
    <span id="s0"></span>
    <span id="s1">33</span>
    <span id="s2">33</span>
</div>
</body>
</html>

看到沒？3個inline-block的撐開位置是不同的。htm

同時把他們的父元素撐開了。blog

把3個inline-block高度加高試試utf-8

#test span {
        display: inline-block;
        background-color: red;
        height: 10px;
        width: 150px;
    }

撐開方向也不同。class

把span換成button試一試test

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    #test {
        line-height: 0;
        font-size: 80px;
        background-color: gray;
    }
    #test button {
        //display: inline-block;
        line-height: 0;
        font-size: 80px;
        background-color: red;
        height: 1px;
        width: 150px;
    }
    #s1 {
        
    }
    #s2 {
        line-height: 1 !important;
    }
</style>
</head>

<body>
<div style="height: 100px;"></div>
<div id="test">
    <button id="s0"></button>
    <button id="s1">33</button>
    <button id="s2">33</button>
</div>
</body>
</html>

height是1的時候跟span差很少的表現import

增長height以後：meta

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    #test {
        line-height: 0;
        font-size: 80px;
        background-color: gray;
    }
    #test button {
        //display: inline-block;
        line-height: 0;
        font-size: 80px;
        background-color: red;
        height: 30px;
        width: 150px;
    }
    #s1 {
        
    }
    #s2 {
        line-height: 1 !important;
    }
</style>
</head>

<body>
<div style="height: 100px;"></div>
<div id="test">
    <button id="s0"></button>
    <button id="s1">33</button>
    <button id="s2">33</button>
</div>
</body>
</html>

中間元素的撐開方向與span不同了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。