Почему ячейки отбиваются друг от друга если удалить border в класса row, хотя margin задан исключительно h1. И должен срабатывать только на тег h1

Почему, когда я удаляю border, который присвоен классам row, все ячейки начинают отбиваться друг от друга? Ведь margin: 60px 0px 20px 50px; присвоен только к h1, т.е margin должен срабатывать только к тегу h1 и весь текст внутри данного тега должен отбиваться от границ div'a row.

    <div class="content">
    <div class="row">
        <h1>dsadsadsadsadsa</h1>
    </div>
    <div class="row">
        <h1>dsadsadsadsadsa</h1>
    </div>
    <div class="row">
        <h1>dsadsadsadsadsa</h1>
    </div>
    <div class="row">
        <h1>dsadsadsadsadsa</h1>
    </div>
</div>
.content {
    width: 500px;
    height: 500px;
    border: 2px solid;
}
.row {
    width: 80%;
    height: 100px;
    background-color: brown;
    border: 2px solid;
}
.row h1 {
    margin: 60px 0px 20px 50px;
}