Make Empty Div of One Line Height

Make empty div of one line height

Some possibilities:

  • Set height (or min-height) to the line-height's used value.

    The initial value of line-height is normal, whose used value is implementation-dependent, but the spec suggests a number between 1.0 and 1.2

    In my case (FF27 for winXP with font-family: "times new roman") that value is 1.25, so you could use height: 1.25em. However, that value might be different with other fonts or implementations.

    Then, it's better to manually set line-height to some value, like line-height: 1.25em.

    div {  border: 1px solid red;  min-height: 1.25em;  line-height: 1.25;}
    <div></div>

    Why a div with an empty inline-block has height?

    But when the span display is 'inline', why the div's height are 0?

    Not 100% correct because if the span has at least one character the height will be different from 0. Even an invisible zero width space:

    div {
      background: red;
    }
    <div><span>​</span></div>

    Empty div (with style: height) will not display

    If you just want to add white space try this

    <div style="height:400px; width:100%; clear:both;"></div>

    FIDDLE

    or you could just add padding to the body like body { padding-top: 400px; }

    How to set empty span height equal to default line height?

    Here is a simple and robust solution:

    span.item:empty:before {
      content: "\200b"; // unicode zero width space character
    }

    (Update 12/18/2015: rather than using \00a0 non-breaking space, use \200b, which is also a non-breaking space, but with zero width. See my other answer at https://stackoverflow.com/a/29355130/516910)

    This CSS selector only selects the spans that are "empty", and injects some content into that empty space, namely a non-breaking space character. So no matter what font size and line-height you have set, everything around that <span> will fall into line, just as if you had text present in that <span>, which is probably what you want.

    http://plnkr.co/edit/eXHphA?p=preview

    The result looks like this:

    correct resulting layout

    I see two problems with using min-height:

    1. it is vulnerable where font sizes change
    2. the text baseline is not in the correct place

    Here's what the counter-examples look like when things go wrong:

    1. The font size changes, and now you have to hand tune the min-height again. You can't use the same class to support different parts of your website where font sizes are different. Here the font size in this place is 30, but the min-height is still set to 20. So the empty spans are not as tall. :-(

    http://plnkr.co/edit/zeEvca?p=preview

    font-size is 30, but min-height is 20. oops.


    1. Your empty span has the correct height with min-height, but it doesn't line up correctly with the text surrounding the span. The baseline falls incorrectly. Look at the line that says "Huh?" below:

    http://plnkr.co/edit/GGd7mz?p=preview

    how baseline fails

    Code for this last example:

    <div class="group">
      Hello <span class="item">Text</span>
    </div>
    <div class="group">
      Huh? <span class="item"></span>
    </div>
    <div class="group">
      Yes! <span class="correct"></span>
    </div>

    css:

    .group {
      background-color: #f1f1f1;
      padding: 5px;
      font-size: 20px;
      margin-bottom: 20px;
    }

    .item {
      background-color: #d2e3c5;
      border-radius: 6px;
      padding: 10px;
      margin-bottom:5px;
      display: inline-block;
      min-height: 20px;
    }

    .correct {
      background-color: #d2e3c5;
      border-radius: 6px;
      padding: 10px;
      margin-bottom:5px;
      display: inline-block;
    }
    .correct:empty:before {
      content: "\00a0";
    }

    How to make an empty div take space?

    It works if you remove floating. http://jsbin.com/izoca/2/edit

    With floats it only works if there's some content e.g.  

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

    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">Make Empty Div of One Line Heightaa</div>   </div></div>

    Related Topics

    Bootstrap Amazon Style Search Bar

    Why Is Overflow Interacting with Z-Index

    Textarea - Disable Resize on X or Y

    Table Column Formatting

    What Is a Good CSS Cleanup Tool

    When and Why Should We Use View Encapsulation in Angular

    Bootstrap Without Rows

    Responsive CSS - Target 1024 X 768 Screen Size Only

    Rotating Glyphicons/Font Awesome in Bootstrap

    How to Get a Custom Scroll in Firefox and Ie

    Object Oriented CSS: Should It Matter

    How to Set The Background-Position to an Absolute Distance, Starting from Right

    How to Float a Twitter Bootstrap Navbar Item Right with Either Class=Pull-Right or Float:Right

    How to Use SASS to Properly Avoid Embedding Twitter Bootstrap Class Names on HTML

    CSS Apply Border to a Cloud Shape

    Create a Bell Shape with CSS

    Creating a Fuzzy Border in CSS 3

    When to Consider Base64 (Data: Uri) Images


Leave a reply



Submit