css margin и padding вопрос новичка - PullRequest
Новая
       44

css margin и padding вопрос новичка

0 голосов
/ 04 июля 2011

Я борюсь за поведение ниже HTML и CSS кода.Мне известны макеты блоков и свертывание полей, но это, по-видимому, не объясняет следующее:

1) При использовании приведенного ниже кода, без изменений, логотип отображается примерно с 10px пробела между ним иверх страницы и примерно на 4 или 5 пикселей ниже, но цвета, заданного # allcontent.background-color.Интересно, что если я установлю свойство font-size в теле на 0px, это удалит все пустое пространство над логотипом и 4 или 5 пикселей под ним.

2) Если значение отступа в #allcontent изменяется сОт 0px до 1px, затем добавляется около 10px отступов над и под логотипом с цветом, указанным в файле # allcontent.background-color.

index.html file: 

<!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" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="my.css" />
    </head> 

    <body>
        <div id="allcontent">
        <div id="header">           
            <p>
            <img width="200" height="60" src="images/logo.gif" alt="Logo" />
            </p>
            </div>
        </div>      
    </body>
</html>

myФайл .css: 

body {      
    margin: 0px;
    padding: 0px;
}

#allcontent{
    background-color: #dddddd;
    padding: 0px;
    margin: 0px;    
}

#header {   
    padding: 0px;
    margin: 0px;
}

1 Ответ

2 голосов
/ 04 июля 2011

Это ваш код: http://jsbin.com/eronaq

Начиная с более простого вопроса:

логотип показывается с [..] около 4 или 5 пикселей ниже

Этот промежуток - это место, отведенное для текстовых спусков для букв типа g и p.

Вы можете исправить это несколькими способами. Например, установив display: block или vertical-align на top или bottom на img.

display: block: http://jsbin.com/eronaq/2

логотип показывается с 10px пустое пространство между ним и вершиной страница

См .: http://reference.sitepoint.com/css/collapsingmargins

Это пространство - margin-top на p, разрушающемся на всем пути вплоть до body, потому что ничто не мешает ему делать то, что определено правилами свертывания полей.

Под «прикосновением» мы подразумеваем места в которые не имеют отступов, границ или содержимого существуют между соседними полями.

...