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

Godtoy 發布于2019-08-30 13:11 / 1752人閱讀

摘要：設置為，然后設置寬高，和一樣的話，就會在里垂直居中了對吧，然而并沒有。恩，到處改改改試試試，然后發現是搞的鬼。所以，為了不顯示文本，我可以在中插入空格符號，這樣不影響顯示。或者，把的設為，都可以使得高度就是高度。

想要畫下圖這個輪播圖按鈕來著，一個

，中間三個搞定。

設置為inline-block，然后設置寬高，margin-top和margin-bottom一樣的話，就會在

里垂直居中了對吧，然而并沒有。

的高度總是比算出來的高了那么點，使得并沒有很完美垂直居中，怪怪的。

恩，到處改改改試試試，然后發現是line-height搞的鬼。

舉個簡單的栗子哈，我有一個

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

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

HTML代碼：

CSS代碼：

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

結果是

比要高。

恩哼，好奇怪，我嘗試在里輸入點啥，結果就正常了。

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

或者，把

的line-height設為0，都可以使得

高度就是高度。

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

中完美垂直居中了！

如果你在寫CSS過程中發現元素高度總是比計算的大點，看看是不是line-height在搗亂哦。

再舉個栗子，比如在里面插入一個，什么樣式都不設置，的高度會是多少呢？是圖片的高度嗎？還是瀏覽器默認行高呢？（因為是行內元素）

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

自己動手試試咯。

GPU云服務器云服務器父元素元素父節點 iframe父元素 html刪除父元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115374.html

css水平垂直居中

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

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

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

blankyao 2019-08-01 16:54 評論0 收藏0
移動端導航布局（基礎屬性解決大問題）

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

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

摘要：老生常談，水平垂直居中。為什么大家都愛水平垂直居中呢基本根據如上結構，通過實現水平垂直居中。絕對定位利用父元素相對定位和子元素絕對定位進行水平垂直居中。老生常談，水平垂直居中。為什么大家都愛水平垂直居中呢？基本HTML 根據如上結構，通過css實現水平垂直居中。絕對定位利用父元素相對定位和子元素絕對定位進行水平垂直居中。根據是否知道子元素寬高，使用數值或者百分比...

levius 2019-08-29 18:40 評論0 收藏0
vertical-align以及利用 vertical-align 實現垂直居中

摘要：在中實現垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。在 css 中實現垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現在整理一下關于它的一些知識點。原文鏈接 1. 適...

lscho 2019-08-30 15:52 評論0 收藏0