how to change <p>'s position inside a <div>?

Question

I got a

tag inside a :

#in .css file
div.box {
    width: 50px;
    height: 30px;
}

#in .html file
<div class="box">
    <p>Here</p>
</div>

and it looks like this:

------------
|          |
|   Here   |
|          |
------------

but I want to put <p> at the bottom of <div>, like this:

------------
|          |
|          |
|   Here   |
------------

How?

Answer 1

add this

div.box {
    width: 50px;
    height: 30px;
    position:relative;
}
div.box p{
  margin:0;
  padding:0;
  position:absolute;
  bottom:0;
}