网页边缘周围的空白区域



我对HTML/CSS很陌生,并试图创建一个基本的网站。标题/正文上方和侧面周围都有空白区域。我尝试调整元素的边距/填充/溢出/大小。我已经发布了HTML和CSS。任何帮助将不胜感激。

<body>
<header>
<h4>Pleasant View</h4>
<h1>Pet Competition</h1>
</header>
</body>


/*HTML Styles*/
html {
background: url(images/pets.png) top right  / 30% repeat content-box;
}
/*Body Styles*/
body {
background: white;
margin-left: auto;
margin-right: auto;
border-left: 4px solid black;
border-right: 4px solid black;
min-width: 320px;
max-width: 1000px; 
min-height: 100%; 
width: 100%;
}
/*Header Styles*/
header {
background-color: white;
background: url(images/grass.png) bottom left / 30% repeat-x content-box, 
url(images/blue_gingham.jpg) top left / 30% repeat content-box; 
height: 200px;
width: 100%;
}
header > h4 {
font-family:'Parisienne';
font-size: 2.5em;
font-weight: lighter;
text-align: center;
padding-top: 10px;
padding-bottom: 0;
margin-bottom: 0;
margin-top: 0;
}
header > h1 {
font-family:'Raleway', sans-serif;
font-size: 4em;
text-align: center;
padding-top: 0;
margin-top: 0px;
}

将以下样式应用于htmlbody

html, body {
margin: 0;
padding: 0;
}

默认情况下,它们有一些间距,您必须将其删除。

最新更新