gpt4 book ai didi

html - 如何删除内联/内联 block 元素之间的空间?

转载 作者:行者123 更新时间:2023-11-28 06:39:57 25 4
gpt4 key购买 nike

这些 span 元素之间将有一个 4 像素宽的空间:

span {
display: inline-block;
width: 100px;
background-color: palevioletred;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>

Fiddle Demo

我知道我可以通过删除 HTML 中 span 元素之间的空白来摆脱那个空间:

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

我正在寻找不涉及的 CSS 解决方案:

  • 更改 HTML。
  • JavaScript。

最佳答案

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


由于这个答案变得相当流行,我正在重写它。

我们不要忘记提出的实际问题:

How to remove the space between inline-block elements? I was hopingfor a CSS solution that doesn't require the HTML source code to betampered with. Can this issue be solved with CSS alone?

单独使用 CSS 可以解决这个问题,但是没有完全强大的 CSS 修复。

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

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>

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

这很容易。这很简单。它无处不在。这是实用的解决方案。

有时您确实需要仔细考虑空格的来源。 使用 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>

既然我已经用“一千种不同的方法来删除空格,30 点”让你厌烦死了,希望你已经忘记了所有关于 font-size: 0 的事情。 .

关于html - 如何删除内联/内联 block 元素之间的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34359798/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com