2016-01-19 3 views
1

img.jpg можно загрузить и сохранить в том же каталоге со следующим файлом css.Почему margin 0 не может удалить пустое пространство для css?

enter image description here

<head> 
<style type="text/css"> 
#header { 
    width: 917px; 
    height: 150px; 
    margin: 0 auto; 
    border:2px solid red; 
} 
#logo h1 { 
    margin: 0 ; 
    float: left; 
    padding: 50px 0 0 40px; 
    font-size: 36px; 
    border:2px solid red; 
} 
#logo h2 { 
    margin: 0 ; 
    float: left; 
    padding: 72px 0 0 60px; 
    font-size: 12px; 
    border:2px solid red; 
} 
#menu { 
    margin: 0 ; 
    float: right; 
    border:2px solid red; 
    padding: 70px 0 0 0 ; 
} 
#menu li { 
    display: inline; 
} 
#splash { 
    width: 877px; 
    height: 140px; 
    margin: 0 auto; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
    <div id="logo"> 
      <h1>company web</h1> 
      <h2><a href="#">new life new start</a></h2> 
    </div> 
    <div id="menu"> 
      <ul> 
        <li><a href="#" accesskey="1" title="">contact us</a></li> 
        <li><a href="#" accesskey="2" title="">about us</a></li> 
        <li><a href="#" accesskey="3" title="">project</a></li> 
        <li><a href="#" accesskey="4" title="">product</a></li> 
        <li><a href="#" accesskey="5" title="">service</a></li> 
      </ul> 
    </div> 
</div> 
<div id="splash"> 
    <a href="#"><img src="img.jpg" /></a> 
</div> 
</body> 
<body> 
</body> 
</html> 

Чтобы сохранить файл CSS, как test.html и открыть его с светлячок.

enter image description here

Почему не может получить результат в дальнейшем?

enter image description here

Для #menu, margin: 0 ;padding: 70px 0 0 0 ; она не работает вообще, почему?

+0

вы можете добавить код в jsfiddle? –

+0

Вы всегда можете проверить элемент и посмотреть, откуда этот пробел. – choz

+0

Я проверяю, что это тот же результат, что есть problum –

ответ

1

Как вы знаете, в основном элемент html имеет свое свойство по умолчанию. Из-за этого вы должны использовать css reset в вашем файле css для управления всем этим.

В вашем случае, если вы используете

#menu ul { 
    margin: 0; 
    padding: 0; 
} 

Тогда вы получите ожидается.

или вы можете использовать универсальный класс с помощью *

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

Примените это к вашему стилю

#menu ul { 
    padding: 0px; 
} 
Смежные вопросы