Отступы в HTML
Сейчас я покажу, как с помощью CSS делать отступы в HTML документе. Для начала один совет, не делайте горизонтальные отступы в блочном элементе, если для него вы явно указали ширину, и соответственно, не делайте вертикальные отступы в блочном элементе, для которого вы явно указали высоту. Делать этого не следует, потому что некоторые браузеры прибавляют отступ к высоте или ширине элемента, как это указано в стандарте HTML, а другие нет.
Существует 2 вида отступов. Внешний отступ – стиль margin и внутренний отступ стиль padding.
Приведу пару примеров, сначала я задам общие стили отображения для всех DIVов, чтобы их было видно, а в самом элементе я буду показывать отступы, чтобы было нагляднее:
<style type="text/css">
div{
border:1px solid #ff0000; /* рамка */
}
</style>
<div style="margin:10px 20px 30px 40px;">текст в диве с внешними отступами</div>
<div style="padding:10px 20px 30px 40px;">текст в диве с внутренними отступами</div>
Для первого DIVа я указал внешние, а для второго внутренние отступы верхний 10 пикселей, правый 20, нижний 30 и левый 40 пикселей.
Эти стили можно использовать почти для всех HTML элементов, например внешний отступ можно использовать для картинок, внутренний отступ для ячеек таблицы. Также рекомендую явно указывать верхний и нижний отступ для абзаца (тэг <p>) и для заголовочных тэгов (h1, h2, h3,…), т. к. в разных браузерах поумолчанию эти значения могут отличаться.
Часто бывает необходимо убрать внутренний отступ у тела документа, т. к. пумолчанию не во всех браузерах он равен нулю. Для этого нужно задать, такой стиль.
body{
margin:0px;
padding:0px;
}
