Содержимое вызывает смещение div

Question

При добавлении содержимого 'P' в фрагмент плитки это вызывает смещение указанного div. Дивы должны иметь только один символ. Также приветствуются любые лучшие способы достижения пирамиды сложенных кругов.

https://jsfiddle.net/usm9t60r/

HTML

<div class="container"> 
    <div class="row"> 
     <div class="tile circle">P</div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
    </div> 
    <div class="row"> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
    </div> 
    <div class="row"> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
    </div> 
    <div class="row"> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
    </div> 
    <div class="row"> 
     <div class="tile circle"></div> 
     <div class="tile circle"></div> 
    </div> 
    <div class="row"> 
     <div class="tile circle"></div> 
    </div> 
</div> 

CSS

body { 
    font-size: 62.5%; 
} 

.container { 
    min-width: 32rem; 
    max-width: 96rem; 
    margin: 0 auto; 
} 

.row { 
    text-align: center; 
    margin-bottom: -0.5rem; 
} 

.circle { 
    background: #ccc; 
    width: 5rem; 
    height: 5rem; 
    border-radius: 50%; 
    display: inline-block; 
} 

Answer 1

Поскольку вы стиль каждого .circle с display:inline-block, а значение по умолчанию для vertical-align равно baseline, добавление текста к элементу делает его согласованным с базовым уровнем других элементов.

У меня был успех, добавив vertical-align:top в класс .circle.

body { 
 
    font-size: 62.5%; 
 
} 
 
.container { 
 
    min-width: 32rem; 
 
    max-width: 96rem; 
 
    margin: 0 auto; 
 
} 
 
.row { 
 
    text-align: center; 
 
    margin-bottom: -0.5rem; 
 
} 
 
.circle { 
 
    background: #ccc; 
 
    width: 5rem; 
 
    height: 5rem; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    vertical-align:top; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="circle">P</div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="circle"></div> 
 
    <div class="circle"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="circle"></div> 
 
    </div> 
 
</div>

Answer 2

Вы можете добавить пробел в

<div class="tile circle">&nbsp;</div>