HTML
<!DOCTYPE html>
<html>
<head>
<title>Испытание: строим таблицу на CSS</title>
<meta charset="utf-8">
<base href="/assets/course86/">
<link href="course.css" rel="stylesheet">
</head>
<body>
<article class="formula">
<p>Поваренная книга</p>
<div class="column-group">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="column column-last"></div>
<div class="content">
<ul>
<li><img src="img/blue-crystal.png" alt=""></li>
<li><img src="img/bones.png" alt=""></li>
<li><img src="img/magic.png" alt=""></li>
<li><img src="img/stick.png" alt=""></li>
</ul>
<ul>
<li><img src="img/green-crystal.png" alt=""></li>
<li><img src="img/stick.png" alt=""></li>
<li>–</li>
<li><img src="img/skull.png" alt=""></li>
</ul>
</div>
<header>
<ul>
<li>Объект 1</li>
<li>Объект 2</li>
<li>Объект 3</li>
<li>Результат</li>
</ul>
</header>
<div class="content content-important">
<ul>
<li><img src="img/led.png" alt=""></li>
<li><img src="img/fireball.png" alt=""></li>
<li><img src="img/sand-glass.png" alt=""></li>
<li><img src="img/gold.png" alt=""></li>
</ul>
</div>
</article>
</body>
</html>
CSS
/* Используемые цвета:
#777777
#ffffff
#fffebc желтый
#b2fdd0 зеленый
#ffbaba розовый
*/
.formula {
margin: 10px;
width: 500px;
border-collapse: collapse;
display: table;
}
.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
display: table-caption;
caption-side: bottom;
text-align: center;
}
.formula header {
background-color: #ffffff;
display: table-header-group;
}
.formula .content-important {
display: table-footer-group;
background-color: #fffebc;
}
.formula .content {
display: table-row-group;
}
.formula ul {
display: table-row;
}
.formula ul li {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 5px;
border: 1px solid #777777;
}
.column-group {
display: table-column-group;
background-color: #b2fdd0;
}
.column {
display: table-column;
}
.column-last {
background-color: #ffbaba;
}
Собственно назревший вопрос: почему если для ‹li› указать
- padding-top: 5px;
padding-bottom: 5px;
или - padding: 5px auto;
то появляется смещение элементов, причем в каждом из этих случаев разное?
P.S. Во вставленных кодах HTML и CSS указан код на 100% (для сравнения с вариантами).
Заранее спасибо!
