Почему элементы <p>и <h1> вызывают пробелы в моем макете? - PullRequest
Новая
       8

Почему элементы <p>и <h1> вызывают пробелы в моем макете?

5 голосов
/ 15 июня 2009

Если у меня есть следующий HTML: 

<body>
    <div id="mainTop">
    </div>
    <div id="main">
        <h2>
            <%= Html.Encode(ViewData["Message"]) %></h2>
        <p>
            To learn more about ASP.NET MVC visit 
                http://asp.net/mvc</a>.
        </p>
    </div>
    <div id="mainBottom">
    </div>
</body>

Со следующим CSS: 

#mainTop
{
    background: url('/Content/Images/bg_top.png') no-repeat;
    width: 963px;   
    height: 65px;
    margin: 0 auto;
    text-align: left;
    color: #5d676d;
}

#main
{
    background: url('/Content/Images/bg_middle.png') repeat-y;
    width: 963px;   
    min-height: 50px;
    margin: 0 auto;
}

#mainBottom
{
    background: url('/Content/Images/bg_bottom2.png') no-repeat;
    width: 963px;   
    height: 128px;
    margin: 0 auto;
}

Это выглядит так:

alt text

Почему некоторые теги, такие как <p> и теги заголовков, вызывают пробелы в моем макете? В идеале, я бы хотел, чтобы между моим контентом не было таких огромных промежутков.

Ответы [ 6 ]

17 голосов
/ 15 июня 2009

По умолчанию <p> и <h2> (среди прочих) имеют поля и отступы, связанные с ними. Попытка добавить следующее в ваш CSS: 

p, h2 {
  margin: 0px;
  padding: 0px;
}

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

Редактировать: как Гуффа указал в ответе ниже, причина того, что поля абзаца и заголовка выходят за пределы их DIV контейнера, связана с коллапсом полей. *

3 голосов
/ 15 июня 2009

Это из-за уменьшения полей . Поля - это не то, что окружает отдельный элемент, например, отступы. Вместо этого поле определяет расстояние между элементами. Если родительский элемент не имеет полей или отступов (как и элементы div в вашем коде), поля дочерних элементов (h2 и p) определяют расстояние между родительскими элементами, а не дочерними элементами.

В настоящее время следует избегать сворачивания полей, когда у родительских элементов установлен фон, поскольку IE (по крайней мере, до версии 7) не обрабатывает правильно свертываемые поля.

Если вы просто установите некоторые отступы для своих элементов div (похоже, вы должны их иметь в любом случае), поля не будут разрушаться вне их.

3 голосов
/ 15 июня 2009

Чтобы избежать подобных ситуаций, используйте что-то вроде YUI Reset . Он устанавливает CSS по умолчанию на что-то предсказуемое во всех браузерах.

2 голосов
/ 15 июня 2009

Проблема из-за коллапсирующих полей . Поля на элементах h1 и p вносят свой вклад в поля основного элемента div. Это можно исправить, убрав поля на этих элементах: 

h1,p { margin: 0; }

или добавив рамку или отступ в div: 

#main { padding: 1px; }

Также убедитесь, что ваш HTML правильно сформирован, у вас есть бланк </a> в вашем образце.

0 голосов
/ 15 июня 2009

Я (обычно) запускаю каждый CSS-файл следующим образом, чтобы избежать попадания при автозаполнении / полях: 

*
{
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 0;
}

изменить для ясности: 

*
{
   margin: 0;
   padding: 0;
}

делает то же самое.

0 голосов
/ 15 июня 2009

Вы пробовали сброс CSS, прежде чем добавить свой собственный CSS?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...