处理inline元素之间换行产生的空白_html/css_WEB-ITnose

图片来自网络

inline, inline-block元素之间的换行符会造成类似空格的空白。不知道你遇到过没？比如以下代码：

<a>1</a><a>2</a>

这种问题对布局影响不大，容易被忽略。但是某些极端情况就会把这个问题放大。例如以下代码：

boardmix博思白板

boardmix博思白板，一个点燃团队协作和激发创意的空间，集aigc，一键PPT，思维导图，笔记文档多种创意表达能力于一体，将团队工作效率提升到新的层次。

39

查看详情

<ul>  <li>Item content</li>  <li>Item content</li>  <li>Item content</li></ul><style>li{  width:33.3%;  display:inline-block;  background:#abc; }</style>

这样一行的结构，精确的分配了行内元素的宽度，而换行产生的空白的影响被放大了。如何解决这种问题呢？

1. 选用浮动的block代替inline-block， 因为曾经要处理IE6对inline-block的兼容性，养成了不适用inline-block的习惯，所以第一个想到这种方案。
2. 编码时不使用换行，例如以下代码：

   <ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

   登录后复制
   这种方法没有解决问题，而是规避了问题。这是最简单而不会带来任何影响的方法，但是之后其他人很容易排版你的代码从而导致问题，明显这种方法的可维护性太低。
3. 将父级font-size置0，行内元素再恢复字体大小。这种方式是本人最喜欢的，不是因为它貌似"高大上"，而是因为它揭开了产生问题的原理。
4. 利用注释进行代码排版，例如以下代码：

   <ul>   <li>Item content</li><!----><li>Item content</li><!----><li>Item content</li></ul>

   登录后复制
5. 使用返回标签，类似上一种办法，代码如下：

   <ul> <li>Item content</li  ><li>Item content</li ><li>Item content</li></ul>

   登录后复制
6. 利用css 否定边距，例如以下代码：

   .inline-block-list li { margin-left: -4px;}

   登录后复制
   这种方法是最差的，因为这很有可能为了解决问题而增加了新问题的风险，同时降低了强壮性和可维护性。解决方案都经过了测试，建议采用第一种和第三种。

本文通过Segmentfault，参考了文章Remove Whitespace Between Inline-Block Elements.

立即学习“前端免费学习笔记（深入）”；