- webkit-margin добавляет нежелательные поля на текстах

Это не ударило меня до сих пор (и это не только в браузерах webkit). На все тексты, как p теги h1 теги и т. д... есть дополнительное пространство над и под текстом.

в chrome я нашел это:

таблица стилей агента пользователя

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

это делает выравнивание неправильным в некоторых местах. И да, я использую таблицу стилей сброса, и никакие отступы или поля не добавляются. В значительной степени базовая настройка. Почему это и как мне решить это?

11 71
css padding

11 ответов:

вы также можете напрямую изменить эти атрибуты следующим образом:

-webkit-margin-before:0em;
-webkit-margin-after:0em;

работает для меня в Chrome / Safari. Надеюсь, это поможет!

46

эти -webkit-margin(s) перезаписываются margin: 0; padding: 0;. Не беспокойтесь о них.

дополнительное пространство? Может быть, вы установили line-height:?

40

У меня была та же проблема. Отображение правильно в Firefox, но не Chrome.

я присмотрелся к http://meyerweb.com/eric/tools/css/reset/ и обнаружил, что я не объявил общую высоту линии для тега body в моей таблице стилей. Установите его в 1.2, и это воссоздало правильный макет в обоих браузерах.

8

просто убрать пробелы между тегами, например,

<p id="one"></p>
<p id="two"></p>

будет:

<p id="one"></p><p id="two"></p>
5

у меня была такая же проблема. Дополнительное пространство между ссылками меню. Ни одно из вышеперечисленных решений не сработало. То, что сработало для меня, было отрицательной маржей. Просто сделайте что-то вроде этого:

margin: 0 -2px;

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

Это не имеет ничего общего с-webkit-полями. Скорее всего, проблема возникает с встроенными элементами. Это происходит потому, что у вас есть пробелы или разрывы строк между инлайн элементами. Чтобы исправить это, у вас есть много вариантов:

  • удалить все пробелы и разрывы строк между встроенными элементами
  • пропустить тег закрытия элемента-например </li> (HTML5 не волнует)
  • отрицательная маржа (как указано выше-проблемы с IE6 / 7-кто заботится, обновление ;)
  • set font-size: 0; к проблемному контейнеру встроенных элементов (имеет проблемы с android и если размер шрифта с ems)
  • откажитесь от встроенного и используйте float (таким образом, Вы потеряете текст-выровняйте:центр)

более в частности, и примеры Криса КОЙЕРА

5

у меня была такая же проблема с моим <h3> тег. Я попробовал установить margin:0;, но это не сработало.

я обнаружил, что я обычно комментировал строки в моем css с помощью //. Я никогда не замечал этого, потому что раньше это не вызывало никаких проблем. Но когда я использовал // в строке перед объявлением <h3>, Это заставило браузер полностью пропустить объявление. Когда я торговал // на /**/ я смог настроить маржу.

мораль этой история: всегда используйте правильный синтаксис комментариев!

1

для меня картина была такая:

* {margin:0;padding:0;}

Firefox (FF) и Google Chrome оба ставят 0.67 em поля независимо. FF показал свою маржу по умолчанию, но вычеркнул, но все равно применил ее. GC показал свою маржу по умолчанию (- webkit-margin-before...) распрямленный.

Я подал заявление

* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}

но безрезультатно, хотя GC теперь показал, что его маржа по умолчанию пересечена.

я узнал, что могу подать заявку либо

line-height: 0;

или

font-size: 0;

для достижения желаемого эффекта. Это имеет смысл, если предположить, что маржа имеет .67ем-типа. Если бы кто-нибудь мог дать объяснение, почему браузеры делают нашу жизнь несчастной, применяя зависящую от высоты линии, несъемную маржу, я был бы очень благодарен.

1

для меня в Chrome это было около 40px padding-start что было причиной этого. Я сделал следующее, что сработало:

ul {
    -webkit-padding-start: 0em;
}
0
    -webkit-margin-before: 0em;
    -webkit-padding-start: 0;
    -webkit-margin-after: 0em;

это решило его для меня, когда у меня была эта точная проблема.

0

У меня была та же проблема. Внезапно одна из моих трех ячеек таблицы, содержащих данные, ее заголовок был немного сдвинут вниз. Моя проблема была просто решена путем добавления этого:

table td
{
    vertical-align: top;
}

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

Я думаю, это просто глупо, и не было действительно проблемой... но у следующего человека, который прочитает эту тему, может быть такая же глупая ошибка, как и у меня :)

береги!

-1

Если user agent stylesheet срабатывает, это потому, что свойство tag не было правильно определено в вашей таблице стилей css.

скорее всего, опечатка, забытая скобка или точка с запятой разбивает вашу таблицу стилей до достижения настроек свойств тега, на которые позже ссылается ваша страница или "потребности".

запустите CSS через проверку ошибок, например CSS LINT и исправить любые ошибки в конечном итоге обнаружены.

-1