Question

I made box and I set line-height, the text is automatically vertically center. Is there a way or any kind of trick to set the text on the bottom of the box?

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
    line-height: 100px;
    vertical-align: text-bottom;
 }

<div>FoxRox</div>

Answer 1

2020 Update

You can use CSS grid, flexbox or the original method with line-height:

body { display: flex } /* just to prettify */

div {
  margin: .5em;
  width: 6.25em; height: 6.25em;
  background: #eee;
  color: #333;
  text-align: center
}

.grid {
  display: grid;
  align-content: end;
}

.flex {
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.lh { line-height: 11.5 /* 6.25*2 - 1.5 */ }

<div class='grid'>Hello</div>

<div class='flex'>Hello</div>

<div class='lh'>Hello</div>

---

Setting the height of the div and the line-height of the text to the same value, 100px in your case, is a method of vertically centering the text within the div. That’s the problem.

The solution is to change line-height to twice the height minus the size of the text and remove useless vertical-align.