Маржа и прокладка тега <Body>

Я пишу очень простой HTML-код, который приведен ниже. Написано в блокноте и открывается в IE-8 и Firefox (ОС: Windows Vista).

<html>
<body>
    <table border="1"><tr><td>test</td></tr></table>
</body>
</html>

В приведенном выше коде нет ничего особенного. Он создает некоторое пространство в верхнем левом углу.

enter image description here

Что можно легко удалить, используя следующий код

<body style="margin:0; padding:0">

Теперь я узнаю маржу по умолчанию и отступы, которая является 4 для Firefox и отличается для IE-8.

<body style="margin:4; padding:4">

У меня есть вопрос по этому сценарию.

  • Почему это значение равно 4?
  • Откуда это значение идет, оно где-то сохраняется?
  • Можем ли мы изменить (настраиваем) это значение по умолчанию?
  • Как эти значения отличаются для браузеров?

Спасибо.

ОТВЕТЫ

Ответ 1

  • Прежде всего, это, вероятно, 4px, а не 4. Во-вторых, именно так решил разработчик браузера по умолчанию.
  • Он сохраняется в таблицах стилей браузера по умолчанию.
  • Вы можете, но вы не должны. Он отличается от каждого браузера. Погугли это! How do I change default stylesheet on <insert browser here>?
  • Вероятно, есть небольшие отличия, вы можете сказать... просмотрев таблицы стилей по умолчанию:)

Это различие является одной из основных причин, по которым мы, дизайнеры, используем CSS reset, чтобы нормализовать всю неудобность CSS, которая следует за различными реализациями браузера.

Ответ 2

Браузеры имеют встроенные "нормальные значения по умолчанию" для CSS большинства элементов HTML - это просто препятствует тому, чтобы ваша страница выглядела совершенно нечитаемой, если у вас есть чистый HTML без CSS, но они, конечно, предназначены для переопределения вашим собственным CSS.

Стандарты браузера по умолчанию обычно называются "Таблица стилей User Agent" . Следующий сайт является хорошей ссылкой на различные пользовательские листы IE, которые были на протяжении многих лет, а также предоставляет для других браузеров внизу:

http://www.iecss.com/

Один из методов, который многие используют для "нормализации" значений по умолчанию, поэтому у вас есть одна и та же начальная точка во всех браузерах: "CSS Reset" - это всего лишь фрагмент CSS, который вы размещаете перед своим собственным CSS, который устанавливает все стили UA в одно и то же. Это хорошо известный:

http://necolas.github.com/normalize.css/

Ответ 3

Добавьте это поверх таблицы стилей

*{margin:0px;padding:0px;}

Это устранило все различия в заполнении и маржи в браузерах.

Ответ 4

Попробуйте это

body{
    line-height: 0
}