这些span元素之间将有一个4像素宽的空间:
跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
小提琴演示
我知道我可以通过删除HTML中span元素之间的空白来摆脱这个空间:
<p>
<span> Foo </span><span> Bar </span>
</p>
我正在寻找一个CSS解决方案，不涉及:
修改HTML。 JavaScript。
当前回答
使用其中一个技巧
删除空格 消极的保证金 跳过结束标签(HTML5不在乎) 将字体大小设置为0(字体大小为0的空格是…零宽度) 使用flexbox
请看下面的代码:
body { font-family: sans-serif; font-size: 16px; } ul { list-style: none } li { background: #000; display: inline-block; padding: 4px; color: #fff; } ul.white-space-fix li { margin-right: -4px; } ul.zero-size { font-size: 0px; } ul.zero-size li { font-size: 16px; } ul.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } original... <ul> <li>one</li> <li>two</li> <li>three</li> </ul> Funky code formatting... <ul> <li> one</li><li> two</li><li> three</li> </ul> Adding html comments... <ul> <li>one</li><!-- --><li>two</li><!-- --><li>three</li> </ul> CSS margin-right: -4px; <ul class="white-space-fix"> <li>one</li> <li>two</li> <li>three</li> </ul> Omitting the </li> <ul> <li>one <li>two <li>three </ul> fixed with font-size: 0 <br><br> <ul class="zero-size"> <li>one</li> <li>two</li> <li>three</li> </ul> <br> flexbox <br> <ul class="flexbox"> <li>one</li> <li>two</li> <li>three</li> </ul>
其他回答
我在React和Sass的一个Free Code Camp项目中尝试了字体大小:0的解决方案来解决类似的问题。
它确实有效!
首先，脚本:
var ActionBox = React.createClass({
render: function() {
return(
<div id="actionBox">
</div>
);
},
});
var ApplicationGrid = React.createClass({
render: function() {
var row = [];
for(var j=0; j<30; j++){
for(var i=0; i<30; i++){
row.push(<ActionBox />);
}
}
return(
<div id="applicationGrid">
{row}
</div>
);
},
});
var ButtonsAndGrid = React.createClass({
render: function() {
return(
<div>
<div id="buttonsDiv">
</div>
<ApplicationGrid />
</div>
);
},
});
var MyApp = React.createClass({
render: function() {
return(
<div id="mainDiv">
<h1> Game of Life! </h1>
<ButtonsAndGrid />
</div>
);
},
});
ReactDOM.render(
<MyApp />,
document.getElementById('GoL')
);
然后是萨斯:
html, body
height: 100%
body
height: 100%
margin: 0
padding: 0
#mainDiv
width: 80%
height: 60%
margin: auto
padding-top: 5px
padding-bottom: 5px
background-color: DeepSkyBlue
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#buttonsDiv
width: 80%
height: 60%
margin: auto
margin-bottom: 0px
padding-top: 5px
padding-bottom: 0px
background-color: grey
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#applicationGrid
width: 65%
height: 50%
padding-top: 0px
margin: auto
font-size: 0
margin-top: 0px
padding-bottom: 5px
background-color: white
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px
#actionBox
width: 20px
height: 20PX
padding-top: 0px
display: inline-block
margin-top: 0px
padding-bottom: 0px
background-color: lightgrey
text-align: center
border: 2px solid grey
margin-bottom: 0px
另外两个基于CSS文本模块Level 3的选项(而不是从规范草案中删除的空格崩溃:discard):
词间距:-100%;
从理论上讲，它应该做的正是所需要的——缩短空白 'words'之间由空格字符宽度的100%，即到 零。但不幸的是，似乎在任何地方都行不通，还有这个 特性被标记为“处于危险中”(它也可以从规范中删除)。
词间距:1 ch;
它将字间距缩短为数字“0”的宽度。在单空格字体中，它应该完全等于空格字符的宽度(以及任何其他字符)。这适用于Firefox 10+， Chrome 27+，几乎适用于Internet Explorer 9+。
小提琴
或者，您现在应该使用flexbox来实现许多以前可能使用内联块的布局:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
因为这个答案已经变得相当流行，所以我重新写了一遍。
我们不要忘记被问到的实际问题:
如何删除内联块元素之间的空间?我希望 一个CSS解决方案，不需要HTML源代码 篡改。单靠CSS就能解决这个问题吗?
仅用CSS就可以解决这个问题，但是还没有完全健壮的CSS补丁。
在最初的答案中，我的解决方案是向父元素添加font-size: 0，然后在子元素上声明合理的字体大小。
http://jsfiddle.net/thirtydot/dGHFV/1361/
这适用于所有现代浏览器的最新版本。它适用于IE8。它不能在Safari 5中运行，但可以在Safari 6中运行。Safari 5几乎是一个死浏览器(2015年8月，0.33%)。
大多数相对字体大小可能出现的问题都不难解决。
然而，如果你特别需要一个CSS的修复，这是一个合理的解决方案，如果你可以自由地改变你的HTML(像我们大多数人一样)，我不建议你这样做。
这是我，作为一个相当有经验的web开发人员，实际上所做的解决这个问题:
<p>
<span>Foo</span><span>Bar</span>
</p>
是的，没错。我删除了HTML中内联块元素之间的空白。
很容易。这很简单。它在任何地方都适用。这是务实的解决方案。
有时确实需要仔细考虑空格从何而来。用JavaScript追加另一个元素会添加空格吗?不，如果你做得好就不会。
让我们开始一段神奇的旅程，用不同的方法删除空白，使用一些新的HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
你可以这样做，就像我经常做的那样: < ul > <li>第1项</li><li>第2项</li><li>第3项</li> < / ul >
http://jsfiddle.net/thirtydot/dGHFV/1362/
或者,这个: <德> < li >项目1 < / li > < li >项目2 < / li > < li > 3 < / li >项目 < /德> 或者，使用组合: <德> < li >项目1 < / li > < !-- ——> < li >项目2 < / li > < !-- 项目——> < li > 3 < / li > < /德> 或者，如果你用的是PHP或类似的方法: <德> < li >项目1 < / li > < ? ? > < li >项目2 < / li > < ? ? > < li > 3 < / li >项目 < /德> 或者，你甚至可以跳过完全关闭的标签: <德> < li >项目1 < li >项目2 < li >项目3 < /德>
现在我已经讲了“一千种不同的方法来删除空白，通过三十点”，希望你已经忘记了所有的字体大小:0。
使用其中一个技巧
删除空格 消极的保证金 跳过结束标签(HTML5不在乎) 将字体大小设置为0(字体大小为0的空格是…零宽度) 使用flexbox
请看下面的代码:
body { font-family: sans-serif; font-size: 16px; } ul { list-style: none } li { background: #000; display: inline-block; padding: 4px; color: #fff; } ul.white-space-fix li { margin-right: -4px; } ul.zero-size { font-size: 0px; } ul.zero-size li { font-size: 16px; } ul.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } original... <ul> <li>one</li> <li>two</li> <li>three</li> </ul> Funky code formatting... <ul> <li> one</li><li> two</li><li> three</li> </ul> Adding html comments... <ul> <li>one</li><!-- --><li>two</li><!-- --><li>three</li> </ul> CSS margin-right: -4px; <ul class="white-space-fix"> <li>one</li> <li>two</li> <li>three</li> </ul> Omitting the </li> <ul> <li>one <li>two <li>three </ul> fixed with font-size: 0 <br><br> <ul class="zero-size"> <li>one</li> <li>two</li> <li>three</li> </ul> <br> flexbox <br> <ul class="flexbox"> <li>one</li> <li>two</li> <li>three</li> </ul>
在CSS中有一个简单的解决方案。例如:
HTML
<p class="parent">
<span class="children"> Foo </span>
<span class="children"> Bar </span>
</p>
CSS
.parent {
letter-spacing: -.31em;
*letter-spacing: normal;
*word-spacing: -.43em;
}
.children {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
}
在我看来，在像em这样的项目中使用font-size: 0是不安全的，所以我更喜欢purecss的解决方案。
你可以在这个链接中检查这个框架。享受:)
.row { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; /* For better view */ background: #f9f9f9; padding: 1em .5em; } .col { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; /* For better view */ padding: 16px; background: #dbdbdb; border: 3px #bdbdbd solid; box-sizing: border-box; width: 25%; } <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div>
