html 和 body 标签的边距、填充、高度和宽度答案

【问题标题】：Margin, Padding, Height & width of html and body tagshtml 和 body 标签的边距、填充、高度和宽度
【发布时间】：2015-11-03 23:42:52
【问题描述】：

我编写这段代码是为了了解下面代码的边距、填充和位置。问题在这些 /* */ 之间。再次感谢。

    <!DOCTYPE html>
<html>
<head>
<style> 
html{ 
width:auto;                          /* Does auto will apply the background-color automatically to the display screen */
height:100%;                        /* 100% means 100% of the display browser??*/
margin-left:1%; margin-right:1%;   /*does changing the value of the margin will change anything in the page*/
margin-top:1%;margin-bottom:1%;
padding-left:1%;padding-right:1%;
padding-top:1%;Padding-bottom:0%;
border: 1px solid black;
background-color: red;
}
body{
background-color: #00FF00; 
width:50%;                   /* does it means 50% of the width stated above in the html (auto)*/
height:50%;              /*does it means 50% of the height of the display browser or we have to add the padding-top(1%) in html*/
position: fixed;
top: 25%;              /* does it mean that the body is shifted to below 25% of it's heigh or 25% of the display browser? */
left:25%;     /*  what is the different if i give 0% to left and i changed the margin-left value to 25%*/
border: 2px solid black ;
margin-top: 0px;
margin-left: 0px;}
header{width:50%;height:auto;
top: 25%;left:25%;  /* what does it mean here the value given to top and left??*/
border: 2px solid black ;
margin-top: 10%;
margin-left: 25%;}
h1{margin: 5px; color: blue;}
</style>
</head>
<body>
<header>
<h1> MY First webpage </h1>
</header>   
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

在正文中将项目居中是宽度和边距的简单组合。

下面应用的边距。 margin: 0 auto; 是以下的简写：

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

居中div.wrapper 宽度为960px

body {
  margin: 0; /* REMOVE THE MARGIN FROM THE BODY */
}

.wrapper {
  width: 960px; /* GIVE THE WRAPPING ELEMENT A WIDTH */
  margin: 0 auto; /* USE MARGIN (0 AUTO) TO CENTER THE WRAPPER ON THE SCREEN */
}

/* demo styles */
#header {height: 100px; background: orange}
#content {height: 800px; background: grey}
#footer {height: 150px; background: pink}

<div class="wrapper">
	<div id="header"></div>
	<div id="content"></div>
	<div id="footer"></div>
</div>

HTML 和 Body 之间的区别已在 this StackOverflow 帖子中得到解答。

【讨论】：

【解决方案2】：

是的，身体包含一切。

如果我理解您的问题，您需要做的就是在您的.css 中弄乱body

body {
    margin: XXXpx
}

将 X 替换为最适合您所追求的数字

【讨论】：

我很困惑的是如何改变身体的位置和大小（宽度，高度，边距，填充......）以使其位于显示屏的中心。它在屏幕的左侧和右侧工作，但是当涉及到顶部和底部时，我无法使其完全位于显示屏的中心..
试试这个zerosixthree.se/…
@AmerHamze 你能否提供你的 HTML 来给出一个想法，并证明你目前正在使用的任何 .css 代码。这可能会有所帮助