How do I preserve whitespace between floated elements? - css

Question

I have a container with some spans which have the CSS property float:left, the items have some space between them, my problem is that the whitespace collapses when the container is too small to show it, as demonstrated in the example below
.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>
Also, what's with the weird alignment of the third item?
I have slightly elaborated my example:
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> </span>
</div>
I work primarily on single page applications where the ui requirements often push the boundaries of standard layout guides.
I provide a link to a codepen - empty elements which extends the above idea further by allowing the root container to be resized, this shows that there is room for improvement in this model.
This all leads to potentially new features of css, one namely a margin that should always appear between two elements, either horizontally or vertically.
In my current working example i dont as yet have need to style or add events to the 'spaces', but undoubtedly version 99 in 2050 will do, for instance to select some sub group of items
Going down the margin route, I could if it existed, have used some sort of css selector
.itemX:last-of-type {
margin-right:20px;
}
The trouble with this approach is that I am forced to create different classes for every type of item.

Answer 1

It's better to use diplay: flex and create space with CSS, not with HTML element, This is my example:
.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

well a solution to this problem as hinted to by #adam above is
.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> </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>
i had to apply the same padding and border to the 'space'/empty element so the alignments worked
the trouble is always a trade off between simplifying the problem and including enough information so the answers are relevant
as for using elements to create spaces/empty elements etc, i agree to use margin, padding etc when applicable, in this instance i dont feel the 'space' was accurately represented by such a construct and the closer our models are to what is actually going on the better they perform and the easier they are to maintain
i am open to a flex solution to this problem, i am primarily a javascript person, i really should sit down and go through the various css layouts, so little time ...