css: как избавиться от этого лишнего пробела после и до текста? - PullRequest
Новая
       27

css: как избавиться от этого лишнего пробела после и до текста?

4 голосов
/ 25 сентября 2011

Вот изображение:

http://i.stack.imgur.com/vXr5f.png

HTML-код в php выглядит следующим образом: 

print "<p class = 'Back'>Epic Fail</p>";
print "<p>You forgot to put in your Username or Password.</p>";

CSS для класса Back и pвыглядит следующим образом: 

p.Back
{
font-size: 200px;
display: block;
text-align: left;
font-style: oblique;
}
p
{
font-size: 20px;
color: #292421;
font-family: Times;
}

Все это заключено в тег div с отступом около 25 пикселей, почему так много пустого пространства?Это проблема, потому что она создает полосу прокрутки, которая мне не нужна, и выглядит она не очень хорошо.

РЕДАКТИРОВАТЬ: вот div: 

#login
{
background: #E0DFDB;
width: 1200px;
margin: auto;
}

Я используюпоследняя версия Google Chrome (извините, что не указали) Полоса прокрутки была успешно удалена путем удаления отступов от div входа в систему и высоты строки.Тем не менее, все еще есть пробел, и я тщательно просмотрел весь свой код, чтобы посмотреть, добавил ли я что-нибудь в тег p, но ничего не смог найти.Есть ли сайт, куда я могу загрузить весь свой код, чтобы показать вам, ребята?

РЕЗУЛЬТАТ:

Спасибо, ребята, я решил использовать инструмент веб-разработки, который поставляется с Google Chrome и IT TURNSВНЕ: НЕДОСТУПНОСТЬ К НЕКОТОРЫМ КУЛЬТУРАМ ПОЛУЧИЛА 200PX ?? !!так что все, что мне нужно было сделать, это просто установить поле для p на auto

Ответы [ 3 ]

3 голосов
/ 25 сентября 2011

Это происходит потому, что по умолчанию Chrome применяет стиль -webkit-margin-before: 1em; -webkit-margin-after: 1em к p элементам.В вашем примере это создаст поле 200px выше и ниже элемента.Установка margin: auto или любое другое значение margin переопределяет это значение по умолчанию.

Другие браузеры применяют поле по умолчанию к p элементам различными способами: например, Firefox применяет margin: 1em 0, что приводит к тому же эффекту.

Поле не отображается в jsfiddle, поскольку они используют таблицу стилей сброса, которая дает p elements margin: 0.

1 голос
/ 25 сентября 2011

Я создал версию кода JSFiddle, которую вы опубликовали - см. http://jsfiddle.net/RukbS/

В моем JSFiddle я не вижу большого пустого пространства под «Epic Fail», котороена вашем скриншоте, так что я предполагаю, что в выполняемом вами коде есть что-то, чего вы не показали нам.

Не видя своего кода в действии, трудно понять, в чем разница между ним иверсию, которую я создал, но, глядя на скриншот, очень похоже, что абзац «Epic Fail» состоит из двух строк.

Единственный способ, которым я смог получить свой тест, чтобы повторить это, это поместить<br><br> сразу после слова «Fail».Я предполагаю, что вы этого не делаете.

Возможно, вы захотите удалить атрибут line-height из таблицы стилей.На самом деле он не достигает больших результатов (поскольку в любом случае он подберет этот размер из-за размера шрифта), и это может быть причиной того, что вы видите.Если вы действительно хотите немного больше места вокруг текста, используйте padding или margin;это легче контролировать, чем line-height.

Вы не указали, какой браузер вы используете, который показывает этот эффект.Возможно, вы видите что-то, что появляется только в определенных браузерах.Большинство браузеров в наши дни поставляются с хорошим инструментом отладки, который может помочь изолировать подобные проблемы.В Firefox вам нужно установить плагин Firebug;в большинстве других современных браузеров встроена функция инструментов разработчика.

Откройте окно Firebug / Dev Tools и используйте его, чтобы найти элемент «Epic Fail».Это позволит вам изучить размер и форму элемента, а также какие стили применяются к нему.Это почти наверняка даст вам информацию, которая вам необходима для выяснения, в чем заключается проблема.

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

1 голос
/ 25 сентября 2011

Не уверен, что вы пытаетесь достичь, но комбинация

  1. padding на div и
  2. дополнительно line-height
  3. 50px из padding (25px сверху и снизу)
  4. 50px от line-height (что на 50px больше, чем font-size)
...