如何保留浮动元素之间的空白?

Question

我有一个具有CSS属性float:left的容器，这些项目之间有一些空间，我的问题是，当容器太小而无法显示它时，空白会崩溃，如下面的示例

所示

.root {
display:inline-block;
background-color:lightgray;
width:200px;
margin:50px;
}
body>div:nth-of-type(2){
width:180px;
}
.item {
float:left;
border:1px solid gray;
padding:2px 5px;
background-color:white;
white-space:nowrap;
}
.spc {
float:left;
display:inline-block;
width:20px;
height:1px;
background-color:blue;
}

<div class=root>
<span class=item>item a1</span>
<span class=item>item a2</span>
<span class=spc></span>
<span class=item>item b1</span>
</div>  
<div class=root>
<span class=item>item a1</span>
<span class=item>item a2</span>
<span class=spc></span>
<span class=item>item b1</span>
</div>

还有，第三项对齐方式奇怪是怎么回事?

---

我稍微详细说明了我的例子:

var rainbow=['red','orange','yellow','green','blue','indigo','violet'];
var $=v=>document.querySelector(v);
var root=$('#root');
var item=$('.item');
item.remove();
var spc=$('.spc');
spc.remove();
var data ={
a:2,b:1,c:1
};
update();
function update(){  
Object.keys(data).forEach((key,i)=>{
for(var j=0;j<data[key];j++){
var nitem=item.cloneNode();
nitem.textContent='item '+key+j;
root.append(nitem);
}      
var nspc=spc.cloneNode(true);
let col=rainbow[i];
nspc.style.backgroundColor=col;
nspc.onclick=e=>alert(`i hope you have a ${col} day`);
root.append(nspc);
});
}

#root {
display:inline-block;
background-color:lightgray;
width:250px;
margin:50px;
vertical-align:top;
padding:5px;
}
.item {
float:left;
border:1px solid gray;
padding:2px 5px;
background-color:white;
white-space:nowrap;
margin:2px;
}
.spc {
float:left;
display:inline-block;
width:20px;
background-color:lightblue;
border:1px solid transparent;
padding:2px 5px;  
margin:2px;
cursor:pointer;
}

<div id=root>
<span class=item>item a1</span>
<span class=spc>&nbsp;</span>
</div>

我主要在单页应用程序中工作，其中ui需求经常突破标准布局指南的界限。我提供了一个codependency - empty元素的链接，它通过允许根容器调整大小来进一步扩展上述思想，这表明该模型还有改进的空间。

所有这些都可能导致css的新特性，其中之一就是应该始终出现在两个元素之间的空白，无论是水平还是垂直。

在我目前的工作示例中，我还不需要为'spaces'设置样式或添加事件，但毫无疑问，2050年的99版将会这样做，例如选择一些子组的项目

在页边距路径下，如果它存在的话，我可以使用某种css选择器

.itemX:last-of-type {
margin-right:20px;
}

这种方法的问题是，我被迫为每种类型的项目创建不同的类。

Answer 1

最好使用diplay: flex和CSS元素创建空间，而不是HTML元素，这是我的例子:

.root {
display:flex;
background-color:lightgray;
width:200px;
margin:50px;
flex-direction: row;
gap: 5%;
}
body>div:nth-of-type(2){
width:120px;
}
.item {
border:1px solid gray;
padding:2px 5px;
background-color:white;
white-space:nowrap;
}

<div class=root>
<span class=item>item 1</span>
<span class=item>item 2</span>
</div>  
<div class=root>
<span class=item>item 1</span>
<span class=item>item 2</span>
</div>

Answer 2

解决这个问题的方法是

.root {
display:inline-block;
background-color:lightgray;
width:250px;
margin:50px;
vertical-align:top;
}
body>div:nth-of-type(2){
width:180px;
}
.item {
float:left;
border:1px solid gray;
padding:2px 5px;
background-color:white;
white-space:nowrap;
}
.spc {
float:left;
display:inline-block;
width:20px;
background-color:lightblue;
border:1px solid transparent;
padding:2px 5px;  
}

<div class=root>
<span class=item>item a1</span>
<span class=item>item a2</span>
<span class=spc>&nbsp;</span>
<span class=item>item b1</span>
</div>  
<div class=root>
<span class=item>item a1</span>
<span class=item>item a2</span>
<span class=spc>&nbsp;</span>
<span class=item>item b1</span>
</div>

我必须对'space'/empty元素应用相同的填充和边框，这样对齐才能正常

问题总是在简化问题和包含足够的信息以使答案相关之间进行权衡。

至于使用元素来创建空间/空元素等，我同意在适用的情况下使用边距，填充等，在这种情况下，我不觉得"空间"被这样的结构准确地表示出来，我们的模型越接近实际情况，它们的表现就越好，维护起来也越容易

我对这个问题的灵活解决方案持开放态度，我主要是一个javascript人，我真的应该坐下来，通过各种CSS布局，所以很少的时间…