Здравствуйте, вот моё решение. Интуитивно я чувствую, что оно неоптимально, но не могу объяснить, что именно не так. Подскажите, пожалуйста, что изменить.
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;
position:absolute;
}
.post {
margin-left:75px;
}
.post-stats {
display:inline-block;
margin-top:5px;
margin-left:20px;
margin-right:10px;
}
.post-author {
margin-top:5px;
}
.post-author a, .post-stats a{
text-decoration:none;
color: #2980b9;
}
.post-title {
color: #2980b9;
font-size:20px;
}
.post-date {
position:absolute;
left:10px;
top:50px;
width:55px;
height:55px;
background:white;
color: #7f8c8d;
font-size:15px;
text-align:center;
line-height:55px;
border-bottom:5px solid #bdc3c7;
font-weight:bold;
}
.icon-tags {
background: url("/assets/course14/post-challenge.png") no-repeat 0px 0;
top:98px;
left:85px;
}
.icon-comments {
background:url("/assets/course14/post-challenge.png") no-repeat -20px 0;
top:98px;
left:237px;
}
.post-type {
position:absolute;
width:55px;
height:55px;
background:#7f8c8d;
left:10px;
top:120px;
border-bottom:5px solid #bdc3c7;
background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
}
.post-text {
background:white;
padding:10px 15px;
width:165px;
border-bottom:5px solid #bdc3c7;
}
Да, Вы сами видите, что у Вас не соблюдено одно из самых частых и основных условий здесь: кратность параметров 5 или 10. Но есть идея: сделайте .post не margin-left: 75px; а paddin-left: 75px; Ему же задайте position: relative; Таким образом привяжете основные блоки к .post, а не к окну мини-браузера. Так же привяжите .icon-tags и .icon-comments к .post-stats, а не к окну мини-браузера - и скорректируйте остальные параметры. Будет красивее. И ещё, логичнее задавать внешние отступы между блоками вниз: т.е. вот сделали Вы заголовок, задали ему отступ вниз margin-bottom; Сделали под ним абзац и абзацу уже задаёте margin-bottom и т.д. А не сделали абзац, которому задали margin-top и margin-bottom, а заголовок оставили сам по себе. Безусловно, не всегда так получается сделать - особенно если файл стилей один, а страниц сайта несколько и есть какие-то общие элементы, а на второй страничке, скажем, какой-то совершенно уникальный элемент, которого нет на первой. Тогда не выкрутишься, приходится ему задавать и верхний, и нижний отступ, иначе общий блок над ним, который есть на первой странице, сломает сетку.
Спасибо за подробный отзыв.
Переделал код. Теперь с отступами всё нормально
Поясните, пожалуйста, такие моменты.
-
Я задал .post-stats отступ сверху по той причине, чтобы не создавать отдельное правило для .post-author, где будет только отступ снизу и ничего более. Это приемлимо?
-
Для .post-date и .post-type я пишу единые правила, а потом переопределяю те моменты, которые отличаются для .post-type
Тоже самое я делаю для иконок. Пишу всё общее и потом переопределяю позицию фона (единственный пункт, который отличается).
Это же лучше, чем писать все правила отдельно, для двух классов?
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;
position:absolute;
top:0;
left:0;
background: url("/assets/course14/post-challenge.png");
}
.post {
padding-left:75px;
position:relative;
}
.post-title {
font-size:20px;
color: #2980b9;
margin-bottom:5px;
}
.post-date, .post-type {
position:absolute;
top:0;
left:0;
background:white;
width:55px;
height:55px;
line-height:55px;
text-align:center;
font-size:15px;
font-weight:bold;
border-bottom:5px solid #bdc3c7;
}
.post-type {
top:70px;
background: #7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
}
.post-author a, .post-stats a{
text-decoration:none;
color: #2980b9;
}
.post-stats {
position:relative;
display:inline-block;
margin-top:5px;
padding-left:20px;
padding-right:10px;
}
.post-stats .icon-comments {
background-position: -20px 0;
}
.post-text {
background:white;
width:165px;
padding:10px 15px;
border-bottom:5px solid #bdc3c7;
}