父元素line-height設(shè)為0后，inline-block的空元素終于安分了

Godtoy 發(fā)布于2019-08-30 13:11 / 1844人閱讀

摘要：設(shè)置為，然后設(shè)置寬高，和一樣的話，就會(huì)在里垂直居中了對(duì)吧，然而并沒(méi)有。恩，到處改改改試試試，然后發(fā)現(xiàn)是搞的鬼。所以，為了不顯示文本，我可以在中插入空格符號(hào)，這樣不影響顯示?；蛘?，把的設(shè)為，都可以使得高度就是高度。

想要畫(huà)下圖這個(gè)輪播圖按鈕來(lái)著，一個(gè)

，中間三個(gè)搞定。

設(shè)置為inline-block，然后設(shè)置寬高，margin-top和margin-bottom一樣的話，就會(huì)在

里垂直居中了對(duì)吧，然而并沒(méi)有。

的高度總是比算出來(lái)的高了那么點(diǎn)，使得并沒(méi)有很完美垂直居中，怪怪的。

恩，到處改改改試試試，然后發(fā)現(xiàn)是line-height搞的鬼。

舉個(gè)簡(jiǎn)單的栗子哈，我有一個(gè)

，如果line-height不是0，比如line-height是30px，里面只有一個(gè)空的,我設(shè)置為inline-block，然后設(shè)置寬度50px，高度和line-height一樣，也是30px，那么，

的高度是不是也是30px呢？是呢？不是呢？

HTML代碼：

CSS代碼：

div{
  line-height: 30px;
  background: red;
}
span{
  display: inline-block;
  width: 50px;
  height: 30px;
  background: green;
}

結(jié)果是

比要高。

恩哼，好奇怪，我嘗試在里輸入點(diǎn)啥，結(jié)果就正常了。

所以，為了不顯示文本，我可以在中插入空格符號(hào) ，這樣不影響顯示。

或者，把

的line-height設(shè)為0，都可以使得

高度就是高度。

然后我再給加上margin: 10px 0;，好了，在

中完美垂直居中了！

如果你在寫(xiě)CSS過(guò)程中發(fā)現(xiàn)元素高度總是比計(jì)算的大點(diǎn)，看看是不是line-height在搗亂哦。

再舉個(gè)栗子，比如在里面插入一個(gè)，什么樣式都不設(shè)置，的高度會(huì)是多少呢？是圖片的高度嗎？還是瀏覽器默認(rèn)行高呢？（因?yàn)?b>是行內(nèi)元素）

如果我設(shè)置為display: block;，那么的高度就是高度嗎？還是不是呢？

自己動(dòng)手試試咯。

云服務(wù)器 GPU云服務(wù)器父元素元素父節(jié)點(diǎn) iframe父元素 html刪除父元素

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115374.html

相關(guān)文章

css水平垂直居中

摘要：要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。把元素設(shè)為方法在父元素中設(shè)置和然后設(shè)置垂直對(duì)齊方式為居中就可以適合父元素高固定的，畢竟要設(shè)置行高。本篇博客首發(fā)于本人博客水平垂直居中要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。下面是我總結(jié)的幾種方法廢話不多說(shuō)，直接上菜。showImg(http://ooa3lxrpg....

jaysun 2019-08-29 12:39 評(píng)論0 收藏0
css水平垂直居中

摘要：要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。把元素設(shè)為方法在父元素中設(shè)置和然后設(shè)置垂直對(duì)齊方式為居中就可以適合父元素高固定的，畢竟要設(shè)置行高。本篇博客首發(fā)于本人博客水平垂直居中要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。下面是我總結(jié)的幾種方法廢話不多說(shuō)，直接上菜。showImg(http://ooa3lxrpg....

blankyao 2019-08-01 16:54 評(píng)論0 收藏0
移動(dòng)端導(dǎo)航布局（基礎(chǔ)屬性解決大問(wèn)題）

摘要：移動(dòng)端比較常見(jiàn)的一個(gè)需求是高度根據(jù)寬度進(jìn)行自適應(yīng)。等于視口高度的。一布局場(chǎng)景首頁(yè)導(dǎo)航布局有間距樣式代碼頁(yè)面布局與布局相同代碼解析去除最后一個(gè)元素值設(shè)置布局經(jīng)常會(huì)使得元素元素間莫名其妙出現(xiàn)空隙。寫(xiě)在最前：移動(dòng)端中導(dǎo)航的網(wǎng)格式布局無(wú)處無(wú)在，寬高怎么設(shè)置相適應(yīng)？元素怎么居中對(duì)齊？不同場(chǎng)景怎么選擇代碼最高效？巧妙使用margin、padding等基礎(chǔ)屬性，小小技巧可以解決許多煩惱！一、F...

Edison 2019-08-30 15:44 評(píng)論0 收藏0
在我水了11種水平垂直居中方法之后，我終于明白了

摘要：老生常談，水平垂直居中。為什么大家都愛(ài)水平垂直居中呢基本根據(jù)如上結(jié)構(gòu)，通過(guò)實(shí)現(xiàn)水平垂直居中。絕對(duì)定位利用父元素相對(duì)定位和子元素絕對(duì)定位進(jìn)行水平垂直居中。老生常談，水平垂直居中。為什么大家都愛(ài)水平垂直居中呢？基本HTML 根據(jù)如上結(jié)構(gòu)，通過(guò)css實(shí)現(xiàn)水平垂直居中。絕對(duì)定位利用父元素相對(duì)定位和子元素絕對(duì)定位進(jìn)行水平垂直居中。根據(jù)是否知道子元素寬高，使用數(shù)值或者百分比...

levius 2019-08-29 18:40 評(píng)論0 收藏0
vertical-align以及利用 vertical-align 實(shí)現(xiàn)垂直居中

摘要：在中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到，不過(guò)我一直對(duì)的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。將盒子的垂直中心點(diǎn)與父級(jí)盒子基線往上一半高度的位置對(duì)齊。時(shí)位置與設(shè)置一致。我們可以將設(shè)為來(lái)讓元素完全垂直居中。在 css 中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到 vertical-align ，不過(guò)我一直對(duì) vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。原文鏈接 1. 適...

lscho 2019-08-30 15:52 評(píng)論0 收藏0