html标签之间换行产生的空格

发表于 | 分类于 |

题目描述：

1
2
3
4
5
6
7
8
<style>
  .span1 {border: 1px solid red;width:10px;height: 50px;}
  .span2 {border: 1px solid red;width:10px;height: 50px;}
</style>
<div class="wrap">
  <span class="span1">2</span>
  <span class="span2">3</span>
</div>

html标签之间换行产生的空格

解决方法：

  • 不换行

    1
    2
    3
    <div class="wrap">
      <span class="span1">2</span><span class="span2">3</span>
    </div>

  • 给父标签设置font-size为0:

    1
    2
    3
    .wrap {
      font-size: 0;
    }

  • 设置float

    1
    2
    3
    4
    <style>
      .span1 {border: 1px solid red;width:10px;height: 50px;float:left}
      .span2 {border: 1px solid red;width:10px;height: 50px;float:left}
    </style>

  • flex布局

    1
    2
    3
    4
    .wrap {
      /* font-size: 0; */
      display: flex
    }