行内,行内块元素同行显示问题

行内块,行内元素同行显示会有间隔

在这里插入图片描述
在这里插入图片描述

  • 解决方法

    1. 不换行,代码中同行元素写在同一行中

      <input type="text"><input type="text">
      
    2. 父元素设置font-size: 0px; ,自身也设置font-size属性,否则font-size会被继承

      <style>
              .test {
                  font-size: 0;
              }
          style>
      head>
      <body>
      <div class="test">
          <input type="text">
          <input type="text">
      div>
      body>
      
      <style>
              .test {
                  font-size: 0;
              }
      
              span {
                  font-size: 16px;
              }
          style>
      head>
      <body>
      <div class="test">
          <span>hellospan> <span>worldspan>
      div>
      body>
      
  • 出现原因是因为同行显示的行内元素,行内块元素中间存在空白符

你可能感兴趣的:(前端)