• 紫光阁中共中央国家机关工作委员会 2020-02-23
  • 看见什么有用?[猜想] 2020-02-23
  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
      本篇文章给大家带来的内容是关于CSS如何去除inline-block元素间的间距?(多种方法),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
     
      一、现象描述
     
      真正意义上的inline-block水平呈现的元素间,换行显示或者空格隔开的情况下会有间距,这是因为浏览器在解析时,会将换行等读取成一个空格导致。
     
      二、移出空格的方法
     
      我们可以去掉元素之间的换行和空格,这样间距自然就没有了,但是这样会降低代码的可读性,不可取。
     
      
     
      <div>
     
      <ahref="">
     
      链接1</a><ahref="">
     
      链接2</a><ahref="">
     
      链接3</a><ahref="">
     
      链接4</a>
     
      </div>
     
      <div>
     
      <ahref="">链接1</a
     
      ><ahref="">链接2</a
     
      ><ahref="">链接3</a
     
      ><ahref="">链接4</a>
     
      </div>
     
      <div>
     
      <ahref="">链接1</a><!--
     
      --><ahref="">链接2</a><!--
     
      --><ahref="">链接3</a><!--
     
      --><ahref="">链接4</a>
     
      </div>
     
      使用margin负值,但是,由于外部的不确定因素,以及最后一个元素多出来的负margin值的问题,这个方法也不太可取。
     
      
     
      <style>
     
      a{
     
      background:pink;
     
      display:inline-block;
     
      padding:.5em1em;
     
      margin:-3px;
     
      }
     
      </style>
     
      <body>
     
      <div>
     
      <ahref="">链接1</a>
     
      <ahref="">链接2</a>
     
      <ahref="">链接3</a>
     
      <ahref="">链接4</a>
     
      </div>
     
      </body>
     
     ?、鄹讣渡柚胒ont-size:0,然后再在子元素中设置我们的字体大小,这样也可以去掉元素间的间距。
     
      
     
      <style>
     
      div{
     
      font-size:0;
     
      }
     
      a{
     
      font-size:16px;
     
      background:pink;
     
      }
     
      </style>
     
      <div>
     
      <ahref="">链接1</a>
     
      <ahref="">链接2</a>
     
      <ahref="">链接3</a>
     
      <ahref="">链接4</a>
     
      </div>
     
     ?、苌镜舯蘸媳昵?。
     
      <div>
     
      <ahref="">链接1
     
      <ahref="">链接2
     
      <ahref="">链接3
     
      <ahref="">链接4
     
      </div>
     
     ?、菔褂胠etter-spacing。
     
      
     
      <style>
     
      div{
     
      letter-spacing:-6px;
     
      }
     
      a{
     
      letter-spacing:0;
     
      background:pink;
     
      }
     
      </style>
     
      <div>
     
      <ahref="">链接1</a>
     
      <ahref="">链接2</a>
     
      <ahref="">链接3</a>
     
      <ahref="">链接4</a>
     
      </div>
     
     ?、奘褂脀ord-spacing。
     
      
     
      <style>
     
      div{
     
      word-spacing:-6px;
     
      }
     
      a{
     
      word-spacing:0;
     
      background:pink;
     
      }
     
      </style>
     
      <div>
     
      <ahref="">链接1</a>
     
      <ahref="">链接2</a>
     
      <ahref="">链接3</a>
     
      <ahref="">链接4</a>
     
      </div>



     

    如需转载,请注明文章出处和来源网址:http://www.cuhw.com.cn/jiqiao/j54110.shtml

  • 紫光阁中共中央国家机关工作委员会 2020-02-23
  • 看见什么有用?[猜想] 2020-02-23
  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14