minus 20 pixels at top and bottom of div

Question

As a bare bones examples I have those 2 really simple divs:

(the green one is inside the red one)

Now how can I subtract 20 pixels from the bottom and the top of the green div?

html:

<div id="container">
    <div id="rows">
    </div>    
</div>

css:

#container {
    width: 200px;
    height: 300px;
    background: red;
}

#rows {
    width: 50%;
    height: 100%;
    /* margin-top: 20px;
        margin-bottom: 20px; */

   /*  padding-top: 20px;
    padding-bottom: 20px; */    

/*     top: 20px;
    bottom: 20px;  
    height: auto; */

    background: green;

}

http://jsfiddle.net/clankill3r/2L6c2bLf/1/

Answer 1

Add padding to #container

padding: 20px 0px;

Edit:

as suggested by @Adam you should contain also

box-sizing: border-box;

to stylesheet if you want to preserve box height