Свойство margin в блочных элементах
Здравствуйте. Допустим есть два блока (один блок находится внутри другого), мне нужно внутреннему блоку придать верхнему марджину отступ 20px, а левому марджину в 10px. Прописываю внутреннему блоку:
margin: 20px 0 0 10px; В результате влево есть отступ 10px, все правильно, а вот сверху тоже есть отступ, но не внутреннего блока, а ОБОИХ блоков на эти 20px. Подскажите пожалуйста почему так.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="b-1">
<div id="b-2"></div>
</div>
</body>
</html>
Код:
#b-1{ |
Это называется слияние margin.
http://htmlbook.ru/samlayout/blochna...hiesya-otstupy. Почитай ,там есть варианты ,которые помогут тебе. может тебя устроит вариант присвоить родителю display:inline-block |
Просто нун начальное обнуления
margin:0; padding:0; делать и бордеры прописать (у браузеров дефолтные отступы
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#b-1{
border:1px solid transparent;
background-clip:border-box;
background: #00f;
width: 200px;
height: 200px;
}
#b-2{
border:1px solid transparent;
background-clip:border-box;
background: #f00;
width: 100px;
height: 100px;
margin: 20px 0 0 10px;
}
</style>
</head>
<body style="background: #74CB74;">
<div id="b-1">
<div id="b-2"></div>
</div>
</body>
</html>
|
Deff интересный способ.:)
|
Deff,
Ну margin и padding в ноль, это понятно. А вот при чем здесь бордеры - не понятно. Ведь без них не получится. Или здесь не нужно понимать, нужно просто запомнить, так как это какой-нибудь хак? bot87, Спасибо за ссылку, буду изучать |
прочитаешь ссылку ,тогда поймешь
|
Понял, буду читать.
bot87, Deff, спасибо за помощь, все получилось. |
bot87,
:-E Да ну нафег - рутина, а ссылка полезная Добавил background-clip: |
Цитата:
|
типовое решение:
#b-1{overflow:hidden;} |
| Часовой пояс GMT +3, время: 20:21. |