Нечетный интервал в верхней части демо шаблона html5

Я скачал шаблон HTML5 Boilerplate отсюда http://html5boilerplate.com.

Когда я открыл его для предварительного просмотра шаблона; Я вижу странное место наверху. Это также можно увидеть в их онлайн-демонстрации: http://demo.html5boilerplate.com/.

введите здесь описание изображения

Я вижу это в следующем:

  • FireFox v28
  • Chrome v34.0.1847.116
  • Интернет Эксплорер v11

Используемый CSS:

Я просмотрел исходный html страницы и таблицы стилей css. Я не могу понять, откуда берется этот странный интервал поверх тега <p>.


html css boilerplate html5boilerplate
person Latheesan    schedule 26.04.2014    source источник
comment
Вам следует изучить некоторые инструменты для веб-разработки. В Chrome, например, если вы просто щелкните правой кнопкой мыши элемент и выберите «Проверить элемент», откроется панель, которая позволит вам отслеживать, откуда исходит рендеринг любого элемента на странице. Все веб-браузеры имеют аналогичные инструменты. Вот как был получен правильный ответ ниже.   -  person roblarsen    schedule 27.04.2014

Ответы (2)


arrow_upward
0
arrow_downward

Это стиль пользовательского агента по умолчанию

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

Вам нужно определить свой собственный стиль для элемента <p>. Это то, что ты имеешь в виду?

person falcon    schedule 26.04.2014
comment
Мне также пришлось добавить padding: 0; margin: 0;, и теперь кажется, что нечетный интервал сверху удален. - person Latheesan; 26.04.2014
comment
FWIW, это не очень странно. Это рендеринг абзаца по умолчанию в веб-браузере. Это то, к чему относится стиль пользовательского агента по умолчанию, это стандартный способ, которым веб-браузеры отображают контент без применения CSS. - person roblarsen; 27.04.2014

arrow_upward
1
arrow_downward

Из того, что я вижу, сверху и снизу тега <p> есть отступ в 16 пикселей.

person Lauren    schedule 26.04.2014