В уроке мы столкнулись с отступами margin и padding. Оба из них отвечают за отступы, но для разных ситуаций. Смотрим:

..предыдущий тег..
MARGIN (внешний отступ до блока)
------ (граница блока)
PADDING (внутренний отступ)
содержание блока
PADDING
------ (граница)
MARGIN
..следующий тег..

Граница актуальна для border, background, cursor и других свойств касающихся именно блока. То есть что фон, что рамки будут идти до границы. Так же это касается и область блока. Смотрим пример:

CSS:
.test {
    margin: 10px;
    padding: 40px;
    background-color:red;
    border: 5px solid blue;
    float:left;
    cursor:pointer;
}
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

HTML:
<div class="clearfix">
    <div class="test">Сообщение №1</div>
    <div class="test">Сообщение №2</div>
    <div class="test">Сообщение №3</div>
</div>