9/18 97%

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

Не понимаю в чем дело:
html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
background: #ecf0f1;
}
.test {
display: block;
width: 200px;
background: #1abc9c;
color: #ffffff;
padding: 20px;
}
.test h1 {
font-size: 20px;
font-weight: normal;
margin: 0 0 20px 0;
}
.social {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 5px;
margin-top: 10px;
vertical-align: middle;
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat;
}
.social-fb {
background-position: 0 0;
}
.social-tw {
background-position: -30px 0;
}
.social-google {
background-position: -60px 0;
}

2

Если в html-коде есть хоть один элемент, который в css вы не упомянули, то кода стилей для выяснения причины мало.

1 лайк
3

Скорее всего - у меня этот код вообще не работает.

4 
<body>
    <div class="test">
        <h1>Курс &laquo;Фоны&raquo;</h1>
        <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
        <a class="social social-fb" href="#"></a>
        <a class="social social-tw" href="#"></a>
        <a class="social social-google" href="#"></a>
    </div>
</body>
5

Тег параграфа вниманием обделили. А у него есть отступы по умолчанию.

6

Смотрите, мне достаточно добавить всего 1px для паддинг-боттом и будет 100%. Но тогда мой вариант решения не будет кратен 5, следовательно, верным не является. Другим способом решить никак нельзя?
В целом, какую критику моей разметке дать можете?

7

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

8

Если вы про отступы по умолчанию, то я задал для p - padding-bottom: 1px;
У меня стало сразу 100%.

9

А внешние отступы?

10

Подскажите что не так с ссылками? выдает 95 % …не много длинее чем в образце сам блок у меня выходит…хотя маргин боттом у ссылок не задавал (если прописываю такой паддинг для .cart то выдает 100% - - - padding:20px 20px 17px 20px;)

HTML

Текст "<div class="cart"> <b class="header">Курс &laquo;Фоны&raquo;</b> <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p> <div class="links"> <a class="social social-fb" href="http://facebook.com"></a> <a class="social social-tr" href="http://twitter.com"></a> <a class="social social-gl" href="http://google+.com"></a> </div> </div>" (без применения форматирования)

CSS

.cart{
width: 200px;
background: #1abc9c;
color: white;
padding:20px;
}
.header{
margin:0;
padding:0;
font-size: 20px;
font-weight: normal;
}
p{
margin:0;
padding:0;
margin: 20px 0px 25px 0px;

}
.social{
display:inline-block;
width:30px;
height:30px;
background: #16a086 url("/assets/course14/social-challenge.png") no-repeat;
margin-right: 5px;
}
.social-fb{
background-position: 0 0;
}
.social-tr{
background-position: -30px 0;
}
.social-gl{
background-position: -60px 0;
}

11

.social{
display:inline-block;
width:30px;
height:30px;
background: #16a086 url("/assets/course14/social-challenge.png") no-repeat;
margin-right: 5px;
vertical-align: middle;
}

1 лайк