How to make empty divs stay one by one with space?

hide div if empty css
css empty whitespace
css not empty div
css empty not working
css hide parent if child is empty
css display
css padding
flexbox
<div class="s-content-style">
   <div class="content">
       <div style="margin-top:5px">11</div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px"><b>fff</b></div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px">aaaaaaaaaa</div>
   </div>
</div>

Empty divs superimposed on each other. How to fix it? I need divs one by one with space.

I tryied:

.content{
   overflow: hidden;
}

You can use single and multiple div with using height without nbsp; as below:

.content{
   overflow: hidden;
}
<div class="s-content-style">
   <div class="content">
       <div style="margin-top:5px">11</div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px"><b>fff</b></div>
       <div style="margin-top:5px;height:5px;"></div>
       <div style="margin-top:5px;height:5px;"></div>
       <div style="margin-top:5px;height:5px;"></div>
       <div style="margin-top:5px">aaaaaaaaaa</div>
   </div>
</div>

:empty, The :empty pseudo selector will select elements that contain either nothing or only an HTML comment. div:empty { display: none; } Will Match Will It's useful for hiding empty elements that might cause weird spacing (e.g. they have padding). We are in need for a new pseudo class like :almost-empty . Set size and make inline. Even if you were to reduce the size of a Div one to make room for the other div, because they are block elements you would be left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.

You could define a minimum height for the divs inside your container with class .content. If there is content inside the div, the height will increase as needed. If there is no content, the div will still have a minimum height of your defined value. If you set the min-height value to the defined line-height of your content, empty divs will always have the same height as a div with only one line of content.

The advantage of using min-height is, that you don't need to add different css to empty and non-empty divs. You can style them all at once using one definition.

.content div {
  margin-top: 5px;
  min-height: 18px; /* set to min desired height */
}
<div class="s-content-style">
  <div class="content">
    <div>11</div>
    <div></div>
    <div><b>fff</b></div>
    <div></div>
    <div></div>
    <div></div>
    <div>aaaaaaaaaa</div>
  </div>
</div>

The How and Why of Clearing Floats, Update: A more comprehensive article on floats is now out: All About Floats You'​ve heard of "clearing floats", Put this empty div AFTER your last floated object: If you were looking to put some space around both those divs as a whole then add padding to the main wrapper as a margin on the second div will collapse onto the wrapper and move the wrapper not

Good morning @rantihawk, try this:

<div class="s-content-style">
<div class="content">
    <div style="margin-top:5px">11</div>
    <div style="margin-top:5px">&nbsp;</div>
    <div style="margin-top:5px"><b>fff</b></div>
    <div style="margin-top:5px">&nbsp;</div>
    <div style="margin-top:5px">&nbsp;</div>
    <div style="margin-top:5px">&nbsp;</div>
    <div style="margin-top:5px">aaaaaaaaaa</div>
</div>

How to Make Inline-Block Elements Add Up to 100% Width – UX , If you've ever tried to create two inline-block divs with a 50% width, The space between your first </div> and second <div> create an If you've ever viewed the source for a web page and seen something that looks like this:. This article presents three different ways to make a div take up the remaining height. All solutions are CSS only and the pros and cons are outlined too. IT-Blog on Software-Development.

CSS and Spacing, The box model is a very important concept, one that you must have right in your a div around some text, there is no space between its edges and the text. div  I have two DIVs appearing one below the other. Sometimes the lower DIV collides with the above DIV and appear on top. I have set absolute positions for both DIVs but I tried relative position for the lower DIV also, but nothing improved. I want it to appear correctly on all browsers.

How to achieve 100% height with empty div - HTML & CSS, hi folks, is it possible that a div can be 100% and if nothing is in that div or the content of the div is less the height should remain 100% with toolbars which will of course cut the space which i defined. which will result in other). for a moment i get lost on how to to satisfy the needs. coz every person has no or many toolbars. One option for a beginner would be to apply the principle used for my example to the whole page. Use a div with position: relative as a containing div for the whole page with margin: auto so that it centers at high screen resolutions. Inside the containing div make all divs position: absolute so that positioning is easier for a beginner.

CSS- Div- Be Careful When You Size Your Divs, It makes sense: both DIVs and tables can be nested, have HEIGHT and images or text that takes up more space, the display will be a jumbled mess. If one DIV displays larger than you expect, other important content may be hidden from view​! It does give a "framed" feel, but may help keep visitors oriented if you have  With CSS properties, you can easily put two next to each other in HTML. Use the CSS property float to achieve this.With that, add height:100px and set mar

Comments
  • What you mean overflowed? By who?
  • @Justinas I mean superimposed on each other
  • Why don't you use &nbsp; for empty DIVs?
  • @DhavalPanchal coz, i think its bad codding.
  • @rantihawk try padding-top: 5px instead of margin-top: 5px
  • Hi, thx for answer. Any options without &nbsp; ? I think its bad codding.
  • @rantihawk another solution padding-top: 5px instead of margin-top: 5px
  • @rantihawk how do &nbsp; is bad?
  • @BendyZhang thx, that worked. But why margin not working, just wondering ?
  • @rantihawk why bad coding ? &nbps = non-breaking space, this is used when you want to use a white space in this cases...