css : preserve whitespace between floated elements-CodePudding

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 conatiner 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:20px;
  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 whats with the weird alignment of the third item

CodePudding user response：

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>

CodePudding user response：

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>&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>

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 ...