网页中的边距、内边距和边框未正确显示答案

【问题标题】：Margins, padding and borders not displaying correctly in web page网页中的边距、内边距和边框未正确显示
【发布时间】：2014-12-21 03:04:57
【问题描述】：

我正在创建一个骨架网站作为作业的一部分，但我遇到了边距、填充和边框的问题。我相信这是因为我使用的是旧的 CSS 标准，但我并不完全确定。

我已经附上了其中一个网页的屏幕截图和 CSS 代码，希望有人能来救我。

提前致谢。 :)

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

【问题讨论】：

标签： html css border padding margins

【解决方案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;

}

【讨论】：

我已经整理好了 :) 谢谢！