博主信息
博文
100
粉丝
8
评论
2
访问量
55472
积分:2
P豆:744.5

css设置了 display:inline-block 的块元素之间空白间隙处理办法

2020年09月19日 16:38:57阅读数:189博客 / lilove的博客/ HTML+CSS+Javascript

我们在html页面样式表中使用:

display:inline-block;

案例代码:

  • css结构:
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. .container {
  7. width: 500px;
  8. margin: 100px auto;
  9. border: 1px solid black;
  10. }
  11. .tabs {
  12. width: 300px;
  13. font-size: large;
  14. }
  15. .tabs>p {
  16. width: 80px;
  17. display: inline-block;
  18. background-color: lightblue;
  19. text-align: center;
  20. }
  • html结构:
  1. class="container">
  2. class="tabs">
  3. 选项卡1
  4. 选项卡2
  5. 选项卡3
  • 那么如何解决这个问题呢?

    1. 使用空白注释(此方法降低html代码可读性不推荐):

    1. class="container">
    2. class="tabs">

      选项卡1

      选项卡2

      选项卡3


    2.在父元素上设置:font-size:0; 后,再单独设置有间隙的子元素字体大小:

    1. .tabs {
    2. width: 300px;
    3. font-size: 0;
    4. }
    5. .tabs>p {
    6. width: 80px;
    7. display: inline-block;
    8. background-color: lightblue;
    9. text-align: center;
    10. font-size: 16px;
    11. }


    3.设置 margin 负值抵消空白区域(不推荐,掌握不好空隙宽度)

    4.有间隙的元素设置 float(浮动) (极不推荐,会破坏文档流,如果使用浮动也没必要设置inline-block了)

    5.设置父元素的 letter-spacingword-spacing 为负值,再设置子元素为0

    1. .tabs {
    2. width: 300px;
    3. /* padding: 10px; */
    4. letter-spacing: -0.5em;
    5. word-spacing: -0.5em;
    6. }
    7. .tabs>p {
    8. width: 80px;
    9. display: inline-block;
    10. background-color: lightblue;
    11. text-align: center;
    12. letter-spacing: 0;
    13. word-spacing: 0;
    14. }

    以上就是消除 inline-block 块元素之间间隙的方法。

    全部评论

    文明上网理性发言,请遵守新闻评论服务协议

    条评论