HTML和body標籤的邊距，填充，高度和寬度

我編寫了這段代碼，以便了解下面代碼的邊距，填充和位置。問題在這些/ * * /之間。再次感謝。HTML和body標籤的邊距，填充，高度和寬度

<!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>

來源

2015-11-03 AmerHamze

是的，身體包含了一切。

如果我理解你的問題你應該需要做的是好惹的body在.css

body { 
    margin: XXXpx 
}

更換X與一些最適合你是什麼後

來源

2015-11-03 10:03:23 murday1983

我很困惑的是如何改變位置和身體的大小（寬度，高度，邊距，填充...），以使其位於顯示屏幕的中心。它在屏幕的左側和右側工作，但是當涉及到頂部和底部時，我無法使其完全位於顯示屏的中心。 – AmerHamze

試試這個http://zerosixthree.se/vertical-align-anything- with-just-3-line-of-css/ –

@AmerHamze你可以提供你的HTML給出一個想法，也可以證明你目前使用的任何'.css'代碼。這可能有幫助 – murday1983

圍繞項目身體內部是寬度和邊距的簡單組合。

下面應用的保證金。 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"> 
 
\t <div id="header"></div> 
 
\t <div id="content"></div> 
 
\t <div id="footer"></div> 
 
</div>

HTML和身體之間的差異在this的StackOverflow後得到回答的寬度。

來源

2015-11-03 10:30:08 Aaron

HTML和body標籤的邊距，填充，高度和寬度

回答

相關問題