Сетки.[32/32] Подскажите!

Курсы §15. Сетки
1 
html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 300px;
    font-family: "Arial", sans-serif;
    font-size: 12px;
}

.gallery {
    padding-top: 5px;
    margin:5px;
    text-align:center;
   
}

.gallery .item {display:inline-block;
    width: 125px;
    margin: 0px 12px ;
    margin-bottom: 10px;
 
    
    
}

.gallery .title {
    margin-bottom: 5px;
    line-height: 14px;
    text-align:left;
   
}

.gallery .frame {
    background: #ecf0f1;
     border:1px solid;

}

.gallery .image {  
    height: 70px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin:10px 0px auto;
    border-top:1px solid;
}

.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 {
    height:13px;
    font-style: italic;
    font-size: 11px;
    color: #666666;
    border-top:1px solid #000000;
    text-align:center;
    padding:5px;
    text-align: left;
   
}
.item:nth-child(1) {margin-right: 10px;}
.item:nth-child(4) {margin-left: 1px;

}

.item:nth-child(3) {margin-left:4.5px;
}

.item:nth-child(2) {margin-left: 7px;
}

.item:nth-child(5) {margin-left: 4px;margin-right: 1px;
}
2

Убрать все напридуманные селекторы, родительскому контейнеру сбросить шрифт до 0 и переназначить его дочерним элементам font-size: 12px; Подкорректировать боковые отступы у блоков.

3

из того что вы сказали мне пригодилось только 10%>последнее(с этой просьбой я и обратился)
и все же ,если добавить щепотку терпения и 1 столовую ложку разума, то может получится 100% вариант
скорее всего есть и другие варианты ,но этот лично я сделал сам

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 300px;
    font-family: "Arial", sans-serif;
    font-size: 12px;
}

.gallery {
    padding-top: 5px;
    margin:5px;
    text-align:center;
    margin-right:3px;
   
}

.gallery .item {display:inline-block;
    width: 125px;
    margin: 0px 12px ;
    margin-bottom: 10px;
 
    
    
}

.gallery .title {
    margin-bottom: 5px;
    line-height: 14px;
    text-align:left;
   
}

.gallery .frame {
    background: #ecf0f1;
     border:1px solid;

}

.gallery .image {  
    height: 70px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin:10px 0px auto;
    border-top:1px solid;
    
}

.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 {
    height:13px;
    font-style: italic;
    font-size: 11px;
    color: #666666;
    border-top:1px solid #000000;
    text-align:center;
    padding:5px;
    text-align: left;
   
}
.item:nth-child(1) {margin-left:11px;
}
.item:nth-child(2) {margin-left:5px;
}
.item:nth-child(3) {margin-left:5px;
}
.item:nth-child(4) {margin-left:10px;
}
.item:nth-child(5) {margin-left:5px;
}
4

Вы могли вообще не заходить больше на форум и не читать ответ - если нашли свои щепотку терпения и 1 столовую ложку разума. В Москву из СПб тоже можно через Владивосток проехаться - вопрос в рациональности и оптимальности пути.

1 лайк