Верхняя граница опускает заголовок вниз - PullRequest
Новая
       6

Верхняя граница опускает заголовок вниз

1 голос
/ 25 мая 2011

По какой-то причине следующие html-работы находят без верхней границы. Но как только я добавляю верхнюю границу, h1 опускается вниз и над ним появляется пустая строка.

Что должно произойти: 

+---------------
| Title
+---------------

Что происходит с border-top-width: 0px; 

|
| Title
+---------------

Что происходит с border-top-width: 1px; 

+---------------
|
+-Title---------

test.html: 

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="header">
        <h1 id="title">Title</h1>
    </div>
</div>
</body>
</html>

test.css: 

body {
    background-color:black;
    font-size:100%;
}

#title {
    font-size:87px;
    text-indent:5px;
}

#header {
    background-image:url('test.png');
    background-repeat:no-repeat;
    background-color:black;
    color:red;
    height:110px;
    border-style:solid;
    border-top-width:0px;
    border-right-width:0px;
    border-left-width:1px;
    border-bottom-width:1px;
    border-color:white;
}

test.png - изображение PNG высотой 110 пикселей.

Ответы [ 2 ]

3 голосов
/ 25 мая 2011

Это потому, что по умолчанию (таблица стилей браузера по умолчанию) h1 элементы имеют верх и низ margin.

Когда вы добавляете border-top: 1px, margin становится расстоянием между h1 и #header, а не h1 и body.

Сброс браузера может исправить это.

Вы заметите, когда отметите галочкой Нормализованный CSS в jsFiddle , он отлично работает.

2 голосов
/ 25 мая 2011

Попробуйте 

#title {
    margin-top:0px;
    font-size:87px;
    text-indent:5px;
}
...