Fatal编程技术网
  • css/
  • Css 如果有空格，为什么现代浏览器仍然在内联块之间放置空格

Css 如果有空格，为什么现代浏览器仍然在内联块之间放置空格

css

Css 如果有空格，为什么现代浏览器仍然在内联块之间放置空格,css,Css,如果您有这样的标记： <div class="inlineblock">one</div> <div class="inlineblock">two</div> <div class="inlineblock">three</div> <div class="inlineblock">one</div><div class="inlineblock">two</div><

如果您有这样的标记：

<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

1
二
三
css是这样的： .inlineblock{display:inline block；}

您将在元素之间获得空格。大约4倍的空间。除非您的标记如下所示：

<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

onetwotree
现在，我想知道的是为什么

“好的”浏览器仍然这样做的技术原因是什么，即使是最新的Firefox、Chrome和Opera在发布本文时也仍然这样做。我想这背后有一个技术原因，否则它现在已经被修复了

谢谢

这正是他们应该做的

内联元素之间的空格与单词之间的空格没有区别

如果您不想这样做，请使用块元素，或将字体大小设置为零。

嗯，它们之间有空格

要解决此问题，请尝试在父元素中使用
font-size:0
。

有一种比将font-size设置为零更好的删除空白的方法（因为这种方法有令人不快的副作用）。您可以改为使用单词间距：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

section {
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    display:table;/* Webkit Fix */
}

div {
    width: 100px; 
    height: 40px; 
    background: #e7e7e7;
    padding: 10px;
    display:inline-block;
    word-spacing:0; /* reset from parent*/
}

</style>
</head>
<body>
<section>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</section>          
</body>
</html>


部分{
字间距：-.25em；/*在所有现代浏览器中隐藏空白节点（不适用于webkit）*/
显示：表；/*Webkit修复程序*/
}
div{
宽度：100px；
高度：40px；
背景：#e7e7e7；
填充：10px；
显示：内联块；
字间距：0；/*从父级重置*/
}
一
二
三
这就是解决方案

   <style>
    * {
    border:0;
    margin:0;
    padding:0;
    box-shadow:0 0 1px 0px silver;
    }
    .foo {
    width: 100%;
    }
    .bar {
    width: 50%;
    float:left;
    text-align: center;
    }
    </style>
    <div class="foo">
        <div class="bar">
            ...a new customer
        <!-- the whitespace between the following divs affects rendering - why? -->
        </div> <div class="bar">
            ...an existing customer
        </div>
    </div>


* {
边界：0；
保证金：0；
填充：0；
盒影：0 1px 0px银色；
}
傅先生{
宽度：100%；
}
.酒吧{
宽度：50%；
浮动：左；
文本对齐：居中；
}
…新客户
…现有客户
为什么不呢？内联块元素编程为与文本内联显示。如果中间有文本，应该进行渲染。您没有注意到浏览旧版中的错误（实际上这不是故障），为什么它们中的大多数无法完全忍受“内联块”。这不是一个失败，我建议您使用CSS重置。阅读我的回复：@Guilherme-Nascimento不知道你为什么要讨论旧浏览器及其缺点。这与问题无关。@deweydb我不是在讨论，我是在解释这不是错误。阅读我的回复，我编辑了它。@guilhermanascimento我不知道你为什么认为CSS重置与任何形式的问题都有关系。它不会使内联-*元素之间的空白消失。我觉得有趣的是，你试图用一篇文章来支持你的“使用CSS重置”立场，这篇文章展示了CSS重置的糟糕之处。正是，就像你做
ab
时，你期望
ab
而不是
ab
一样，当你写“Hello World”时，你期望的是“Hello World”，而不是“HelloWorld”，谢谢，我没有这样想，我一直在想我是多么讨厌我的标记的外观，但是我想字体大小的改动就足够了。干杯