Question

我创建了一个骨架网站作为作业的一部分，我遇到了边距，填充和边框问题。我相信它是因为我使用的是旧标准的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;
}

Answer 1

因此，如果我理解正确，您希望文本不会触及边框。

首先为您添加一个值，如此

 *, 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;

}

边距，填充和边框在网页中无法正确显示

1 个答案: