这些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。
通常我们在不同的行中使用这样的元素,但在display:在同一行中使用标签的内联块将删除空格,但在不同的行中则不会。
在不同的行中有标签的例子:
P跨度{
显示:inline-block;
背景:红色;
}
< p >
<span> Foo </span>
<span> Bar </span>
< / p >
标签在同一行的示例
P跨度{
显示:inline-block;
背景:红色;
}
< p >
<span> Foo </span><span> Bar </span>
< / p >
另一种有效的方法是CSS作业,对父元素使用font-size:0,并根据需要给子元素赋予font-size。
p {
字体大小:0;
}
P跨度{
显示:inline-block;
背景:红色;
字体大小:14 px;
}
< p >
<span> Foo </span>
<span> Bar </span>
< / p >
上述方法可能在某些地方不起作用,这取决于整个应用程序,但最后一种方法是这种情况的万无一失的解决方案,可以在任何地方使用。
这是相同的答案,我给了相关的:显示:内联块-什么是空间?
实际上,有一种非常简单的方法可以从内联块中删除空白,既简单又语义化。它被称为具有零宽度空格的自定义字体,它允许您使用非常小的字体在字体级别上折叠空白(当它们在单独的行上时,由浏览器为内联元素添加)。一旦你声明了字体,你只需要在容器上改变font-family,然后在子容器上再改变,瞧。是这样的:
@font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
很合口味。这里是我刚刚在font-forge中制作的字体下载,并使用FontSquirrel webfont generator进行转换。我只花了5分钟。css @font-face声明包括:压缩零宽度空格字体。它在谷歌驱动器,所以你需要点击文件>下载保存到你的电脑。如果您将声明复制到主css文件中,您可能还需要更改字体路径。
我在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