如何删除行内/行内块元素之间的空格?

How to remove the space between inline/inline-block elements?(如何删除行内/行内块元素之间的空格?)
本文介绍了如何删除行内/行内块元素之间的空格?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

给定此HTML和CSS:

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">
span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

因此,SPAN元素之间将有4个像素宽的空间( ;)。

演示:http://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,我还知道我可以通过删除HTML源代码中span元素之间的空格来消除该空格,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望有一个不需要篡改HTML源代码的CSS解决方案。

我知道如何使用JavaScript解决这个问题--通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示:http://jsfiddle.net/dGHFV/1/

但此问题是否可以仅使用CSS解决?

推荐答案

或者,您可以should now use flexbox实现以前可能使用内联块的许多布局:https://css-tricks.com/snippets/css/a-guide-to-flexbox/


由于此答案已变得相当流行,我将对其进行重大重写。

我们不要忘记被问到的实际问题:

如何删除内联块元素之间的空格?我希望 对于不需要将HTML源代码 被篡改了。仅使用css可以解决此问题吗?

仅使用CSS可以解决此问题,但没有完全可靠的CSS修复程序。

我在最初的回答中得到的解决方案是向父元素添加font-size: 0,然后对子元素声明一个合理的font-size

http://jsfiddle.net/thirtydot/dGHFV/1361/

这在所有现代浏览器的最新版本中都有效。它可以在IE8中工作。它在Safari 5中不起作用,但在Safari 6中起作用。Safari 5几乎是一个死浏览器(0.33%, August 2015)。

大多数可能的相对字体大小问题修复起来并不复杂。

然而,如果您只需要一个css修复程序,这是一个合理的解决方案,但如果您可以像我们大多数人一样随意更改您的HTML,我不建议您这样做。


这就是我,作为一个相当有经验的Web开发人员,为了解决这个问题而实际做的事情:

<p>
    <span>Foo</span><span>Bar</span>
</p>

是的,没错。我删除了内联块元素之间的空格。

这很简单。这很简单。它在任何地方都有效。这是务实的解决方案。

您有时确实必须仔细考虑空格将从何而来。是否会在另一个元素后追加JavaScript添加空格?不会,如果操作正确,则不会。

让我们开始一段神奇的旅程,用一些新的HTML来删除空格:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • 您可以这样做,就像我通常做的那样:

     <ul>
         <li>Item 1</li><li>Item 2</li><li>Item 3</li>
     </ul>
    

http://jsfiddle.net/thirtydot/dGHFV/1362/

  • 或,这:

     <ul>
         <li>Item 1</li
         ><li>Item 2</li
         ><li>Item 3</li>
     </ul>
    
  • 或,使用注释:

     <ul>
         <li>Item 1</li><!--
         --><li>Item 2</li><!--
         --><li>Item 3</li>
     </ul>
    
  • 或者,如果您使用的是PHP或类似软件:

     <ul>
         <li>Item 1</li><?
         ?><li>Item 2</li><?
         ?><li>Item 3</li>
     </ul>
    
  • 或者,you can甚至完全跳过certain结束标签(所有浏览器都可以):

     <ul>
         <li>Item 1
         <li>Item 2
         <li>Item 3
     </ul>
    

现在我已经讲了一千种不同的删除空格的方法,希望您已经完全忘记了font-size: 0

我已经讲了一千种不同的删除空格的方法。

这篇关于如何删除行内/行内块元素之间的空格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

js文件上传前的预览和删除实例代码,具体如下: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title文件上传预览和删除/title style #img-box{display: flex;
layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
element el-tree树结构刷新后保留展开状态解决方法 我们在使用element的el-tree组件的时候,当我们给树结构重新赋值后,树节点就全部自动合上了。所以我们要记录展开状态,方法如下 html代码如下: el-tree ref="tree" :data="treeList" :highlight-current="true" :
js输出当前日期和时间的实例代码,具体实例代码如下,有兴趣的朋友可以尝试运行下。 !doctype htmlhtml lang="en" head meta charset="UTF-8" title获取当前时间/title /head body script type="text/javascript" /** *获取当前时间 *format=1精确到天 *format=2精确到秒 */ function
html页面:添加这一行 contentType: application/x-www-form-urlencoded !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title显示小区信息/title script src="https://cdn.staticfile.org/jquery/1.10.2/jq
p您的性别:/p div class="radio-sex" input type="radio" id="sex1" name="sex" label for="sex1"/label span男/span /div div class="radio-sex" input type="radio" id="sex2" name="sex" label for="sex2"/label 女 /divstyle.radio-sex { position: relative; display: inline-