В общем, мне кажется, даже не так. Я знаю что у меня криво сделано, но не особо понимаю почему. Мб просто лишние отступы, подскажите пожалуйста как сделать более правильно да и попросту код чище.
Мой HTML код :
" body
div class=“container”>
span>
Курс «Фоны»
/span>
p> Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов./p>
div class=“share”>
a> class=“social social-fb” href=“maybesite”></a
a> class=“social social-tw” href=“maybesite”></a
a> class=“social social-gg” href=“maybesite”></a
/div>
Мой CSS код :
html,
body {
margin: 0;
}
body {
width: 280px;
min-height: 280px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
line-height: 1.2;
font-family: “Arial”, sans-serif;
background-color: #ecf0f1;
}
.container {
background-color : #1abc9c;
color : white;
padding : 1px 20px 0px 20px;;
width : 200px;
}
span {
display : inline-block;
padding-top : 19px;
font-size : 20px;
}
p {
padding-top : 6px;
}
.share {
padding-bottom : 10px;
}
.social{
display: inline-block;
width: 30px;
height: 30px;
margin-top : 11px;
margin-right: 5px;
margin-bottom: 10px;
vertical-align: middle;
background: #ecf0f1 url(“social-challenge.png”) no-repeat ;
}
.social-fb {
background-position : 0px 0px;
background-color : #16a085 ;
}
.social-tw {
background-position : -30px 0;
background-color : #16a085 ;
}
.social-gg {
background-position : -60px 0;
background-color : #16a085 ;
}