How to add some pixels to the current height of div

Question

I want to increase the height of the div to be rendered 10px additional in advance from the auto. in CSS I have set the height of div to auto

css :

div {
  height: auto;
}

But I want like this:

 div {
      height: auto + 10px;
    }

Answer 1

Use padding.

 div {
      height: auto;
      padding-bottom: 10px;
    }

or

 div {
      height: auto;
      padding-top: 10px;
    }

or

 div {
      height: auto;
      padding-top: 5px;
      padding-bottom: 5px;
    }

if this is not you desired then add jQuery together with the css like below: css:

 div#auto10 {
      height: auto;
    }

javascript:

$(document).ready(function(){
    $('#auto10').height($('#auto10').height() + 10);
});

Answer 2

To implement your requirement, I think you may use jquery, a famous and powerful library of js, suppose the div is <div id="test_div"></div> , you can write the following code:

$(document).ready(function(){
    $('#test_div').height($('#test_div').height() + 10);
});

the height will just be 10px higher than it is rendered.

Besides, you can also add some hidden element whose height is exactly 10px in the bottom of the div.

Hope helps!

Answer 3

Using pure CSS? Try this:

div {
  background-color: gold;
}

div:before, div:after {
  content: ' ';
  display: block;
  height: 5px; /* 5px + 5px = 10px */
}