Почему есть поле вокруг тегов hr и img?

Question

Почему есть поле вокруг тегов hr и img?

0

Я пытаюсь удалить пробелы вокруг hr и img-тегов, мне еще не удалась, вот JSFiddle.

Может ли кто-нибудь показать мне, как это сделать?

Это хорошая идея использовать hrs вместо divs при создании сепарирования/окружения? Должен ли я использовать div вместо этого? Может кто-нибудь сказать мне, какой из них лучший вариант. Извините за короткий вопрос.

НЕКОТОРЫЙ КОД:

<img class="banner margin_padding" src="http://goo.gl/ftvYk5">
<hr class="line margin_padding"/>
<hr class="line margin_padding"/>
<hr class="line margin_padding"/>

img.banner {
    height: 200px;
    width: 100%;
}
hr.line {
    background-color: red;
    color: red;
    height: 20px;
}
.margin_padding {
    margin: 0px;
    padding: 0px;
}

РЕДАКТИРОВАТЬ:

Границы имеют размер границы по умолчанию, о котором я забыл, и изображение должно отображаться в блоке

Viscocent 12 май 2014, в 04:32

Источник

3

Непонятно, о чем ты говоришь. Похоже, вы говорите о поле на самом теле. Или вы говорите о границе по горизонтальному правилу? Будьте более конкретны и включите код здесь в свой вопрос. Кроме того, вы могли бы рассмотреть сброс CSS. Простым является * { margin:0, padding:0 } . Я сам им не пользуюсь ... Я предпочитаю другие перезагрузки, но это не редкость.
Brad 12 май 2014, в 01:59
0

Я сказал, I am trying to remove whitespace around hr and img tags Почему я буду привязываться к телу?
user3483494 12 май 2014, в 02:01
1

... потому что я не вижу пробелов вокруг ваших тегов hr и img, если только вы не ссылаетесь на whitepsace по сторонам всех их, которые находятся в теле.
Brad 12 май 2014, в 02:02
0

добавить body { background-color:blue; } JSFiddle, и вы увидите, что это определенно не тело, а элемент
user3483494 12 май 2014, в 02:03
0

Вам нужно будет сделать снимок экрана и точно указать, на что вы ссылаетесь. Я говорю вам, что единственный пробел, который я вижу, это от тела. Вы уверены, что не смотрите на границу горизонтального правила?
Brad 12 май 2014, в 02:05
0

В вашей скрипке просмотрите исходный текст в инструментах разработчика, и вы увидите поле размером 8 пикселей на родительском теге тела изображения.
Ben Felda 12 май 2014, в 02:07

Показать ещё 4 комментария

Теги:

html

css

image

margin

2 ответа

1

То, что вы видите, является полем по умолчанию тега <body>. Фактическое значение зависит от браузера.

Обычная практика, чтобы избежать большинства различных значений по умолчанию для браузера, явно задает значение margin и padding 0:

html, body {
    margin: 0;
    padding: 0;
}

kapex 11 май 2014, в 23:12

0

Вопрос касается полей hr и img, а не поля по умолчанию
user3483494 12 май 2014, в 02:08
0

Хорошо. Я не вижу других пробелов вокруг часа в примере, поэтому, возможно, добавьте картинку, если вы еще не решили ее.
kapex 12 май 2014, в 02:14
0

Я думаю, что разные браузеры имеют разные значения по умолчанию
user3483494 12 май 2014, в 02:19

Показать ещё 1 комментарий

Ещё вопросы

Непонятно, о чем ты говоришь. Похоже, вы говорите о поле на самом теле. Или вы говорите о границе по горизонтальному правилу? Будьте более конкретны и включите код здесь в свой вопрос. Кроме того, вы могли бы рассмотреть сброс CSS. Простым является * { margin:0, padding:0 } . Я сам им не пользуюсь ... Я предпочитаю другие перезагрузки, но это не редкость.
Я сказал, I am trying to remove whitespace around hr and img tags Почему я буду привязываться к телу?
... потому что я не вижу пробелов вокруг ваших тегов hr и img, если только вы не ссылаетесь на whitepsace по сторонам всех их, которые находятся в теле.
добавить body { background-color:blue; } JSFiddle, и вы увидите, что это определенно не тело, а элемент
Вам нужно будет сделать снимок экрана и точно указать, на что вы ссылаетесь. Я говорю вам, что единственный пробел, который я вижу, это от тела. Вы уверены, что не смотрите на границу горизонтального правила?
В вашей скрипке просмотрите исходный текст в инструментах разработчика, и вы увидите поле размером 8 пикселей на родительском теге тела изображения.
Вопрос касается полей hr и img, а не поля по умолчанию
Хорошо. Я не вижу других пробелов вокруг часа в примере, поэтому, возможно, добавьте картинку, если вы еще не решили ее.
Я думаю, что разные браузеры имеют разные значения по умолчанию

Viscocent · Accepted Answer · 2014-05-12T00-55-00.000Z

Добавить display:block тэг img и border:0 до вашего hr тега.

.margin_padding {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

Вы, сэр, гениальны, я забыл, что у них есть граница: P
@unableToCompile Если бы вы прочитали мой комментарий, вы могли бы решить эту проблему 10 минут назад.
@unableToCompile НП, счастливое кодирование.