Отключить свертывание границ в этом тестовом примере - PullRequest
Новая
       14

Отключить свертывание границ в этом тестовом примере

0 голосов
/ 13 мая 2009

Если вы посмотрите следующую демонстрационную версию HTML, вы увидите неожиданную оранжевую рамку в верхней части страницы во всех браузерах (я проверил). Если тег

заменен тегом

, все будет работать, как и ожидалось. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test Lay-Out</title>         
        <style>
            html{
                overflow: auto; /*for IE*/
                height: 100%;
            }

            body{
                background-color: orange;
                margin: 0;
                height: 100%;
            }
            #page{
                background-color: green;

                height: 100%;
                margin-bottom: -50px;
            }
            #footer{
                background-color: red;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <p>test</p>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

Это потому, что

имеет верхнее поле и, благодаря свертыванию границ, сворачивается в родительский элемент. Хотя это является желаемым эффектом для создания текстовых абзацев и т. П., Он редко используется для макетов.
Как я могу убедиться, что границы не повышены до определенных элементов (в данном случае от & ltp; до родительского div)?

- ОБНОВЛЕНИЕ -
Поскольку все ответы, похоже, идут по пути «отключить заполнение абзаца», я немного переработал свой вопрос и изменил название.
Удаление отступов из p - это способ устранить симптом, а не причину.

Ответы [ 8 ]

5 голосов
/ 14 мая 2009

также необходимо сбросить отступ для body / html.

2 голосов
/ 13 мая 2009

Все браузеры загружают таблицу стилей по умолчанию перед любыми определенными вами стилями.

Это стиль, который вы видите, когда загружаете «простой» HTML в ваш браузер.

Вы должны изучить и использовать CSS reset практически во всех ваших проектах.

2 голосов
/ 13 мая 2009

Элемент <p> по умолчанию имеет margin-top, что понижает весь контент. Вы можете избавиться от него, используя margin-top: 0 на этом <p>.

0 голосов
/ 13 мая 2009

Как насчет добавления overflow: hidden; к родительскому элементу?

0 голосов
/ 13 мая 2009

Да, сверху будет пробел, потому что абзац оставляет некоторое пространство до и после. Следующее удаляет пробел попробуйте: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Test Lay-Out</title>                     
                <style>
                        html{
                                overflow: auto; /*for IE*/
                                height: 100%;
                        }

                        body{
                                background-color: orange;
                                margin: 0;
                                height: 100%;
                        }
                        #page{
                                background-color: green;
                                height: 100%;
                                margin-bottom: -50px;
                        }
                        #page p.first{
                                margin-top:0;
                        }
                        #footer{
                                background-color: red;
                                height: 50px;
                        }
                </style>
        </head>
        <body>
                <div id="page">
                 <p class="first">test</p>
                </div>
                <div id="footer">footer</div>
        </body>
</html>
0 голосов
/ 13 мая 2009

добавьте это к своим стилям: 

#page p{ margin-top: 0; }
0 голосов
/ 13 мая 2009

Это немного отстойно, но я сам нашел это.
Еще раз, это рушатся границы, обманывая меня. Здесь - это хорошая публикация на форуме, которая описывает это. В моем дизайне было уместно убрать поле из элемента

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

0 голосов
/ 13 мая 2009

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

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

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

...