成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Godtoy / 1819人閱讀

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

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

，中間三個搞定。

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

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

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

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

，如果line-height不是0，比如line-height是30px，里面只有一個空的,我設(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é)果是

比要高。

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

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

或者，把

的line-height設(shè)為0，都可以使得
高度就是高度。

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

中完美垂直居中了！

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

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

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

自己動手試試咯。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115374.html

相關(guān)文章

  • css水平垂直居中

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

    jaysun 評論0 收藏0

  • css水平垂直居中

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

    blankyao 評論0 收藏0

  • 移動端導(dǎo)航布局（基礎(chǔ)屬性解決大問題）

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

    Edison 評論0 收藏0

  • 在我水了11種水平垂直居中方法之后，我終于明白了

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

    levius 評論0 收藏0

  • vertical-align以及利用 vertical-align 實現(xiàn)垂直居中

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

    lscho 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<