| |
 3.3 Кб |
|
| | Жили были два кода. Первый был не очень смышлёный и всё время терял свою серую зону вместе с маргином своего «младшего брата»:
<div id="старшийБрат" style="background-color: #eee">
<div id="младшийБрат" style="margin: 25px 0 25px 0">
Я должен быть весь в серой зоне, вместе с маргином!
</div>
</div>
|
Второй был умный, и оставлял серую зону «младшему брату»:
<div id="старшийБрат" style="padding: 25px 0 25px 0; background-color: #eee">
<div id="младшийБрат">
Я должен быть весь в серой зоне, вместе с маргином!
</div>
</div>
|
Почему первый не может быть таким же, как второй? | |
| |
|
|
| |
|
|
| |
для: Ъ
(06.02.2015 в 21:24)
| | | Я так понимаю, это всё «эффект схлопывания»? | |
| |
|
|
| |
|
|
| |
для: Ъ
(06.02.2015 в 21:32)
| | | Это - разница между margin и padding | |
| |
|
|
| |
|
|
| |
для: elenaki
(07.02.2015 в 10:06)
| | | Не совсем. В идеале в первом варианте второй div должен сместить края верхнее и нижнее первого div-а, и тем самым создать область вокруг себя того же фона, но он этого не делает. Только если закрыть схлопывание:
<div id="старшийБрат" style="padding: 25px 0 25px 0; background-color: #eee">
<div id="младшийБрат" style="margin: 25px 0 25px 0">
Я должен быть весь в серой зоне, вместе с маргином!
</div>
</div>
|
То есть в случае данного примера поля будут не 50px, а всё равно 25px. | |
| |
|
|
| |
|
|
| |
для: Ъ
(06.02.2015 в 21:32)
| | | > Я так понимаю, это всё «эффект схлопывания»?
Да. Можно исправить, добавив диву-обертке границу или сделав его плавающим. Хотя есть и другие способы. | |
| |
|
|
| |
|
|
| |
для: Mookapek
(07.02.2015 в 18:13)
| | | Да, методы обхода знаю, просто первый раз столкнулся с данным эффектом. Даже не знаю почему, но раньше его не наблюдалось. Мне показалось, что эффекта раньше такого не было, до последнего обновления моей таблицы стилей. Я её сократил, убрав некоторые неиспользуемые вещи. Как будто я раньше как-то совладал с этим эффектом, сам того не зная. | |
| |
|
|
