Котогалерея. Не проходится. Отступы.

Курсы §15. Сетки
1

Доброго времени суток, друзья. Хотелось бы узнать, в чем недосмотр мой в этом испытании. Пытался подобрать отступами, но не вышло, все попытки кончились.

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:300px;
font-family:‘Arial’, sans-serif;
font-size:12px;
}
.gallery{
padding-top:10px;
text-align: center;
}
.gallery .item{
display: inline-block;
text-align: left;
width:125px;
margin:0 10px;
margin-bottom:10px;
}
.gallery .title{
margin-bottom:5px;
line-height:14px;
}
.gallery .frame{
border: 1px solid black;
padding: 10px 0 5px 0;
background:#ECF0F1;
}
.gallery .image{
border-top: 1px solid black;
border-bottom: 1px solid black;
height:70px;
background-position:50% 50%;
background-repeat:no-repeat;
}
.gallery .image-1{
background-color:#2ECC71;
background-image:url(’/assets/course13/cat_box.png’);
}
.gallery .image-2{
background-color:#3498DB;
background-image:url(’/assets/course13/cat_fish.png’);
}
.gallery .image-3{
background-color:#f1c40f;
background-image:url(’/assets/course13/cat_purr.png’);
}
.gallery .image-4{
background-color:#E67E22;
background-image:url(’/assets/course13/cat_walk.png’);
}
.gallery .image-5{
background-color:#E74C3C;
background-image:url(’/assets/course13/cat_drunk.png’);
}
.gallery .date{
padding-top: 5px;
padding-left: 5px;
color:#666;
font-style:italic;
font-size:11px;
}`

2

Задайте отступы отдельно для первого и четвертого элемента с помощью псевдоклассов :nth-child.

3

Попробовал задать первому элементу left-margin, смещаются и все остальные элементы, в том числе и правильно расположенный центральный… В общем, едет картинка совсем…

4

Надеюсь, это еще актуально.
Ваш код доработан следующим образом. Вставляю только фрагменты, где есть изменения.
.gallery{
padding-top:10px;
text-align: center;
font-size: 0;
}
.gallery .item{
display: inline-block;
text-align: left;
width:125px;
margin-right: 20px;
margin-left: auto;
margin-bottom:10px;
font-size: 12px;
}
Про обнуление размера шрифта рассказано здесь.

.item:nth-child(1) {
margin-left: 0px;
}
.item:nth-child(3) {
margin-right: 0px;
}
.item:nth-child(4) {
margin-left: 20px;
}
Если будут вопросы, пишите.

1 лайк