Итоговое испытание

Курсы §14. Мастерская: декоративные элементы
1

Пожалуйста подскажите в чем проблема? Выполнено на 99%.
Pixelhunting не помогает. Движение на 1px не спасает при выравнивании запятой внутри тега post-stats и второй ссылки следующей за ней.

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

body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
color: #7f8c8d;
background: #ecf0f1;
}
.post-stats .icon {
width: 15px;
height: 15px;
}
.post-title {
float: right;
width: 205px;
color: #2980b9;
font-size: 20px;
padding: 0px 0px 0px 0px;
}
.post-date {
float: left;
background-color: white;
border-bottom: 5px solid #bdc3c7;
width: 55px;
height: 37px;
text-align: center;
vertical-align: middle;
font-size: 15px;
font-weight: bold;
padding: 18px 0px 0px 0px;
}
.post-type {
clear: both;
margin-top: 10px;
float: left;
background-color: #7f8c8d;
border-bottom: 5px solid #bdc3c7;
width: 35px;
height: 25px;
background-image: url(/assets/course14/quotes.png);
background-repeat: no-repeat;
background-position: 50% 50%;
text-align: center;
padding: 20px 10px 10px 10px;
}
.post-author {
margin-top: -36px;
float: right;
width: 205px;
padding: 5px 0px 5px 0px;
}
.post-author a {
color: #2980b9;
text-decoration: none;
}
.post-stats {
margin-top: -13px;
margin-left: 20px;
margin-right: -6px;
padding-top: 1px;
line-height: 15px;
float: left;
display: inline-block;
vertical-align: top;
}
.post-stats a {
display: inline-block;
text-decoration: none;
color: #2980b9;
vertical-align: middle;
margin-top: -1px;
margin-right: -1px;
}
.icon-tags {
background-image: url(/assets/course14/post-challenge.png);
display: inline-block;
line-height: 15px;
vertical-align: middle;
margin-right: 2px;
}
.icon {
display: inline-block;
vertical-align: middle;
margin-top: -1px;
}
.icon-comments {
line-height: 15px;
vertical-align: middle;
background-image: url(/assets/course14/post-challenge.png);
display: inline-block;
margin-right: 2px;
background-position: -20px 0;
margin-left:1px;
}
.post-text {
clear: both;
margin-top: -48px;
width: 180px;
float: right;
padding: 10px 10px 10px 15px;
background-color: white;
border-bottom: 5px solid #bdc3c7;
}

2

Каждый из элементов, которому вы прописали display: inline-block; вместе с преимуществами (расположение в одну строку) получает и недостатки (так называемые “пробелы”).
С помощью отрицательных внешних отступов здесь никак не выровнять.
Посмотрите на форуме последние темы за вчерашний день. Очень похожие были вопросы.

1 лайк
3

Спасибо за ответ.

4

Сделал без inlin-block, и все равно нет 100%.
Подскажите, в чем здесь проблема?

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

body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
color: #7f8c8d;
background: #ecf0f1;
}
.post-stats .icon {
width: 15px;
height: 15px;
}
.post-title {
float: right;
width: 205px;
color: #2980b9;
font-size: 20px;
padding: 0px 0px 0px 0px;
}
.post-date {
float: left;
background-color: white;
border-bottom: 5px solid #bdc3c7;
width: 55px;
height: 37px;
text-align: center;
vertical-align: middle;
font-size: 15px;
font-weight: bold;
padding: 18px 0px 0px 0px;
}
.post-type {
clear: both;
margin-top: 10px;
float: left;
background-color: #7f8c8d;
border-bottom: 5px solid #bdc3c7;
width: 35px;
height: 25px;
background-image: url(/assets/course14/quotes.png);
background-repeat: no-repeat;
background-position: 50% 50%;
text-align: center;
padding: 20px 10px 10px 10px;
}
.post-author {
margin-top: -36px;
float: right;
width: 205px;
padding: 5px 0px 5px 0px;
}
.post-author a {
color: #2980b9;
text-decoration: none;
}
.post-stats {
margin-top: -13px;
margin-left: 20px;
margin-right: -6px;
padding-top: 1px;
padding-right: 1px;
line-height: 15px;
float: left;
position: relative;
}
.post-stats div {
text-align: center;
}
.post-stats a {
text-decoration: none;
color: #2980b9;
clear: both;
padding-left: 20px;
}
.post-stats a:nth-child(3) {
position: absolute;
top:1px;
left:58px;
}
.icon-comments+a {
position: absolute;
left:65px;
margin-left: -2px;
}
.icon-tags {
background-image: url(/assets/course14/post-challenge.png);
line-height: 15px;
}
.icon {
vertical-align: middle;
margin-right: 2px;
position: absolute;
}
.icon-comments {
line-height: 15px;
vertical-align: middle;
background-image: url(/assets/course14/post-challenge.png);
background-position: -20px 0;
margin-left: -2px;
position: absolute;
left:65px;
}
.post-text {
clear: both;
margin-top: -48px;
width: 180px;
float: right;
padding: 10px 10px 10px 15px;
background-color: white;
border-bottom: 5px solid #bdc3c7;
}

5

Каким-то образом получилось добить ваш вариант на флоатах. Единственное, пришлось изменить порядок элементов в HTML-коде (благо, что редактор в этом задании не заблокирован), чтобы избавиться от отрицательных отступов.
HTML
`

Испытание: анонс поста
13.09
Интенсив: программа
Автор: HTML Academy
5
Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили еще кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.
`

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

body { width: 280px; min-height: 250px; padding-top: 50px; padding-left: 10px; padding-right: 10px; font-size: 12px; font-family: "Arial", sans-serif; line-height: 1.2; color: #7f8c8d; background: #ecf0f1; }
.post-stats .icon { width: 15px; height: 15px; }

.post-title {
float: left;
margin-left: 20px;
/*width: 205px;*/
color: #2980b9;
font-size: 20px;
/*padding: 0px 0px 0px 0px;*/
}
.post-date { float: left; background-color: white; border-bottom: 5px solid #bdc3c7; width: 55px;
height: 40px;
line-height: 1.6;
text-align: center; /*vertical-align: middle;*/ font-size: 15px; font-weight: bold;
padding: 15px 0px 0px 0px;
}
.post-type { clear: both;
margin-top: 8px;
float: left; background-color: #7f8c8d; border-bottom: 5px solid #bdc3c7; width: 35px; height: 25px; background-image: url(/assets/course14/quotes.png); background-repeat: no-repeat; background-position: 50% 50%; text-align: center; padding: 20px 10px 10px 10px; }
.post-author { /*margin-top: -36px;*/
float: left;
margin-left: 20px;
/*width: 205px;*/ padding: 5px 0px; } .post-author a { color: #2980b9; text-decoration: none; }
.post-stats { /*margin-top: -13px;*/ /*margin-right: -6px; padding-top: 1px; padding-right: 1px; line-height: 15px;*/ float: left; position: relative;
left: 20px;
padding-left: 20px;
margin-right: 14px;
} /*.post-stats div { text-align: center; }*/ .post-stats a { text-decoration: none; color: #2980b9; /*clear: both;*/ /*padding-left: 20px;*/ } /*.post-stats a:nth-child(3) { position: absolute; top:1px; left:58px; } .icon-comments+a { position: absolute; left:65px; margin-left: -2px; }*/ .icon-tags { background-image: url(/assets/course14/post-challenge.png); /*line-height: 15px;*/ } .icon { /*vertical-align: middle;*/ /*margin-right: 2px;*/ position: absolute;
left: 0;
} .icon-comments { /*line-height: 15px;*/ /*vertical-align: middle;*/ background-image: url(/assets/course14/post-challenge.png); background-position: -20px 0; /*margin-left: -2px;*/ /*position: absolute;*/ /*left:65px;*/ } .post-text { /*clear: both;*/
margin-top: 20px;
margin-left: 20px;
width: 180px;
float: left;
padding: 10px 10px 10px 15px; background-color: white; border-bottom: 5px solid #bdc3c7; }
Разбирайте, задавайте вопросы, если что-то не понятно.