Почему свойство padding увеличивает размер элементов?

У меня есть div с буквой:

HTML

<div>A</div>

CSS

div {
  border: 1px solid black;
  background-color: #CC0000;
  width: 150px;
  height: 150px;
  margin: 10px 5px 5px 50px;
  padding: 0px 30px 0px 10px /* I want to move my letter with it */
}

Буква перемещается из-за свойства padding, но при этом квадрат становится больше. Почему заполнение преобразует квадрат в прямоугольник?

JSF: http://jsfiddle.net/fnBaD/1