Поля, отступы и границы не отображаются правильно на веб-странице

Я создаю скелетный веб-сайт как часть задания, и у меня есть проблема с полями, заполнением и границами. Я считаю, что это потому, что я использую старый стандарт CSS, но я не совсем уверен.Поля, отступы и границы не отображаются правильно на веб-странице

Я включил скриншот одной из веб-страниц и код CSS в надежде, что кто-то придет мне на помощь.

Заранее спасибо. :)

enter image description here

*, html { 
    margin: 0; 
    padding: 0; 
} 

body { 
    margin: 0 px; 
    font-family: sans-serif; 
    background-color: #B8B8B8; 
} 

h1 { 
    height: 80 px; 
    color: #FFFFFF; 
    background-color: #003366; 
    text-align: right; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    padding: 32 px; 
    margin: 0 px; 
} 

#nav { 
    height: 50 px; 
    background-color: #336699; 
    text-align: left; 
    color: white; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 16 px; 
    border-bottom: thin solid Black; 
    padding: 16 px; 
    margin: 0; 
} 

#nav ul { 
    height: auto; 
    margin: 0px; 
} 

#nav li { 
    display: inline; 
} 

#nav a { 
    text-decoration: none; 
    color: #ffffff; 
    padding: 16px 16px 16px 16px; 
} 

#nav a:hover { 
    background-color: white; 
    color: #000000; 
} 

#nav a:active { 
    background-color: white; 
} 

h2 { 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
} 

#body { 
    background-color: White; 
    border: thin solid Black; 
    padding: 1 em; 
    margin-left: 1%; 
    margin-right: 1%; 
    height: auto; 
} 

#footer { 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    text-align: center; 
    font-size: x-small; 
}

источник

2014-10-25 Robert Dudley

Так что, если я вас правильно понимаю, вы хотите, чтобы текст не касаться границ.

Начните с добавлением значения к вам края, как так

*, html { 
    margin: 10 px; 
    padding:25 px ;}

это, конечно, пример вы должны соответствовать им, как вам нравится.

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

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="css1.css"/> 
</head> 
<body> 
    <header>abc</header> 
</body> 
</html>

CSS

body { 
margin-left : 25px; 
margin-right: 20px; 
padding: 10px; 
border: dotted;

}

источник

2014-10-25 12:20:05 Brecht

Я отсортирован сейчас :) Спасибо! –

Поля, отступы и границы не отображаются правильно на веб-странице

ответ

Смежные вопросы