这是我一生中第一个建立的网站，因此非常感谢您的帮助！我还在学习html和CSS。我的第一个网站几乎完工，除了我是为原始分辨率1280x800构建的。当我更改分辨率时，元素会分开。为此，我只需要更改body属性中右边距的值即可。例如，当前为7em。如果我想以1920x1200分辨率为中心，则值应为27em。我已经尝试过使用站点包装程序和@media查询技术，但这似乎不起作用。解决方案显然很简单，但是我不能自己解决。
请帮我！
我的HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Autoprevoznik Damjanić</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Autoprevoznik Damjanić / Prevoz robe / Špediterske usluge" />
<meta name="keywords" content="Damjanić, autoprevoznik, špediter, prevoz robe, špediterske usluge" />
<link rel="stylesheet" type="text/css" href="naslovna.css" />
<link rel="shortcut icon" href="Truck.ico" />
</head>
<body>
<h1><a href="naslovna.html">:::Autoprevoznik Damjanić</a></h1>
<div id="border_left"></div>
<ul>
<li><a href="kontakt.html">Kontakt Informacije</a></li>
<li><a href="galerija.html">Galerija slika</a></li>
<li id="empty"><a href="onama.html">O nama</a></li>
</ul>
<div id="border_right"></div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
<div class="background">
<div class="border">
<div id="box1">
<h2>Ukratko o nama</h2>
<h3>Usluge prevoza</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="button" ><a href="galerija.html" style="text-decoration:none" title="Galerija slika" class="read_more">galerija</a></div>
</div>
</div>
</div>
<div class="background">
<div class="border">
<div id="box2">
<h2>Aktuelnosti</h2>
<h3>Poslednje vesti</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="button" ><a href="onama.html" style="text-decoration:none" title="Detaljnije" class="read_more">detaljnije</a></div>
</div>
</div>
</div>
<div class="background">
<div class="border">
<div id="box3">
<h2>Kontakt informacije</h2>
<h3>Identifikacija preduzeća</h3>
<p>Možete nas kontaktirati na brojeve telefona :</p>
<p>+381 (0) 6</p>
<p>+381 (0) 34</p>
<p>Email:</p>
<div class="button" ><a href="kontakt.html" style="text-decoration:none" title="Detaljnije" class="read_more">detaljnije</a></div>
</div>
</div>
</div>
</body>
</html>
而我的CSS：
body {
background:url(background.jpg);
background-repeat: no-repeat;
background-position: top center;
background-color:#b0d3f6;
margin: 3em 7em 0em;
}
p {
font-size: 11px;
margin: 0px 30px 0px 0px;
color: rgb(111, 130, 150);
line-height: 18px;
text-align: left;
}
h1 a {
color: rgb(27, 63, 150);
position: relative;
top: 30px;
text-decoration: none;
}
h2 {
font-size: 16px;
color: rgb(27, 63, 98);
margin-bottom: -5px;
}
h3 {
font-size: 12px;
color: rgb(84, 130, 175);
}
#box1, #box2, #box3 {
display: inline-block;
width: 306px;
background: url(box_top.png) top left no-repeat;
padding: 0px 18px;
position: relative;
top: -35px;
}
.border {
display: inline-block;
background: url(box_bottom.png) bottom left no-repeat;
position: relative;
top: 17px;
vertical-align: top;
}
.background {
display: inline-block;
background: url(box_in.png) repeat-y;
}
.button {
position: relative;
left: -10px;
width: 77px;
height: 19px;
line-height: 16px;
background: url("button.png") no-repeat;
font-size: 11px;
color: rgb(255, 255, 255);
text-align: center;
margin: 20px 10px 0px;
}
a { color:white;}
ul {
float:right;
position:relative;
top: -35px;
left: -60px;
list-style: none;
padding:0;
margin:0;
height: 48px;
line-height: 70px;
background: url("menu_back.png") no-repeat;
}
ul a {
color: rgb(113, 136, 157);
text-decoration: none;
font-size: 12px;
line-height: 45px;
display:block;
}
ul li {
background: url("menu_line.png") no-repeat;
position: relative;
float: right;
margin: 7px 0px 0px;
height: 40px;
}
li {
float: right;
border-bottom-width: 0;
padding: 0px 20px;
}
#content {
position: relative;
top: -35px;
clear: both;
width: 1005px;
height: 247px;
background: url("slider_back.png") no-repeat;
}
#content p {
margin-left: 2em;
}
#border_left {
background: url("menu_back_left.png") no-repeat;
position: relative;
right: 440px;
top: -35px;
height: 48px;
width: 11px;
float: right;
}
#border_right {
background: url("menu_back_right.png")no-repeat;
position: relative;
right: -320px;
top: -35px;
height: 48px;
width: 11px;
float: right;
}
#empty {
background: none;
}
如您所见，只有有问题的行是保证金：3em 7em 0em;如果我能使保证金值（7em）正确，问题将得到解决！
最佳答案
您想要的是将网页居中？如果要居中，建议使用：
margin: 0 auto; /*left and right margin are "automatic"*/
您可以使用此选项使您的身体处于任何分辨率的中心：
body {
margin: 0 auto;
width: 80%;
}
如果您放置100％，则内容将具有完整宽度，因此没有任何内容可以居中。如果要居中放置其他内容，则要居中的框的宽度应小于其父对象的宽度。
无论如何，使用body元素中的值居中是不好的。
关于html - 我如何使边距适合许多分辨率？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15042307/