關(guān)于line-height的一個(gè)奇怪的問題

當(dāng)給.inner設(shè)置height的時(shí)候里面的文字就跑到下面了，為什么??？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test {
            line-height: 200px;
            background-color: #ccc;
        }
        .test .inner {
            display: inline-block;
            height: 20px;
            width: 100px;
            vertical-align: middle;
            background-color: yellow;
        }
        .test .text {
            display: inline-block;
            /*height: 20px;*/
            width: 100px;
            /*vertical-align: bottom;*/
            background-color: rgb(240, 20 ,20)
        }
    </style>
</head>
<body>
    <div class="test">
        <span class="inner">ddd</span>
        <span class="text">我是文字</span> 
    </div>
</body>
</html>

回答

編輯回答

空白格

css里面把span也要加上

2017年12月28日 12:33

編輯回答

眼雜

display:inline-block
簡(jiǎn)單來說就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。給span inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

http://www.zhangxinxu.com/wor...（一）/

2018年2月16日 18:22

編輯回答

冷溫柔

為什么？
就單純這個(gè)問題的話，是因?yàn)?/p>

line-height: 200px;

你的span內(nèi)容都繼承了這個(gè)行高
第一個(gè)span這個(gè)時(shí)候的內(nèi)容是溢出的，你可以給它加

overflow:hidden;

文字被hidden了。

2017年3月11日 07:49

編輯回答

笨笨噠

你想讓ddd垂直居中最好用line-height:20px;講道理vertical-align這玩意不好用

2018年1月3日 19:38

編輯回答

柚稚

如果你將文字也理解成節(jié)點(diǎn)就好解釋了

.test {
    line-height: 200px;
}
.test .inner {
    display: inline-block;
    height: 20px;
    width: 100px;
    vertical-align: middle;
}

由于inner是行內(nèi)元素，vertical-align: middle;是對(duì)自身的一個(gè)垂直居中
inner的行高繼承了父盒子的，文字的行高也為200px，因此會(huì)在下面，也是因?yàn)槠湫懈?br>給inner添加line-height:20px后就OK了

2017年10月17日 04:44

編輯回答

執(zhí)念

給.test .inner加個(gè)line-height:20px, 因?yàn)榈谝粋€(gè)span高度只有20px而line-height是繼承了.test里面的100px，所以就會(huì)靠下

2018年4月26日 09:52

編輯回答

不討喜

該問題的關(guān)鍵點(diǎn)是考察line-height的繼承問題。
如果line-height屬性值有單位（line-height: 100px;） 或 百分比（line-height: 100%;），則瀏覽器會(huì)繼承換算后的一個(gè)具體的px級(jí)別的值（固定值）；而如果line-height屬性值沒有單位（line-height: 1.5;），則瀏覽器會(huì)直接繼承這個(gè)“因子”，而非計(jì)算后的固定值，此時(shí)它的line-height會(huì)根據(jù)本身的font-size值重新計(jì)算得到新的line-height 值。
舉個(gè)簡(jiǎn)單的小例子：

// html
<div class="parent1">
    <span class="child1">ddd</span>
</div>

<div class="parent2">
    <span class="child2">ddd</span>
</div>

<div class="parent3">
    <span class="child3">ddd</span>
</div>
// 由于 parent1 的line-height是有單位的，那么子元素會(huì)直接繼承一個(gè)固定值，即200px
.parent1 {
    line-height: 200px;
}

// 由于 parent2 的line-height是百分比，那么子元素會(huì)直接繼承一個(gè)換算后的數(shù)值，即200% * 20 = 40px
.parent2 {
    line-height: 200%;
    font-size: 20px;
}
// 由于 parent3 的line-height是沒有單位的，那么子元素會(huì)直接繼承這個(gè)因子，即1.5，此時(shí)子元素的line-height會(huì)根據(jù)本身的font-size值重新計(jì)算得到新的line-height 值 
.parent3 {
    line-height: 1.5;
}

建議您搜搜 line-height 繼承，加深下對(duì)line-height的理解。希望對(duì)您有所幫助！

2018年7月19日 02:49