SNPR
14.Сентябрь.2017 06:14:55
1
Здравствуйте! Помогите пожалуйста разобраться с испытанием.
Не могу поймать баланс между border-spacing
и padding
у article
.
С отступами не кратными пяти удалось добиться результата в 94%, дальше никак не выходит, что я делаю не так?
article {
width: 470px;
display: table;
text-align: center;
border-spacing: 15px 7px;
border: 5px solid #686868;
background-image: url("img/wood.png");
margin: 10px;
padding: 8px 0 9px 0;
}
ul:first-child {
display: table-header-group;
background-image: url("img/wall-1.png");
}
ul:last-child {
display: table-footer-group;
background-image: url("img/wall-2.png");
}
li {
display: table-cell;
border: 10px solid #686868;
padding: 20px 0px;
}
li:last-of-type {
width: 150px;
}
li:first-of-type {
width: 110px;
}
Ineska
14.Сентябрь.2017 06:55:29
2
Отступы задавайте как margin для li.
Ширину ячеек прописывать не надо. Изменяйте внутренние отступы, если необходимо.
1 лайк
SNPR
14.Сентябрь.2017 07:44:19
3
Превратил li
в inline-block
и достиг 100%:
article {
width: 470px;
display: table;
text-align: center;
border: 5px solid #686868;
background-image: url("img/wood.png");
margin: 10px;
padding: 10px 0 0 0;
}
ul:first-child {
display: table-header-group;
}
ul:first-child li {
background-image: url("img/wall-1.png");
}
ul:last-child {
display: table-footer-group;
}
ul:last-child li {
background-image: url("img/wall-2.png");
margin-bottom: 15px;
}
li {
display: inline-block;
border: 10px solid #686868;
margin: 5px 10px 10px 5px;
background-image: url("img/wall-2.png");
padding: 20px;
}
li:last-of-type {
padding: 20px 50px;
}
li:first-of-type {
padding: 20px 30px;
margin-left: 10px;
}