【发布时间】：2016-10-30 07:31:59
【问题描述】：
嘿，我正在为班级制作我的作品集，我试图删除 div 上方的空白，我有我的 h1。我添加了一个 h1，但我不希望它一直位于 div 之上，所以当我在其上添加一个边距顶部会在 div 上方创建空白区域。我该如何删除这个？
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
<a href="#" class="ion-social-facebook"></a>
</li>
<li>
<a href="#" class="ion-social-twitter"></a>
</li>
<li>
<a href="#" class="ion-social-linkedin"></a>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
<a href = "index.html" class = "logo" CE>CE</a>
<a href = "#" class = "nav-links last">Contact</a>
<a href = "#" class = "nav-links">Portfolio</a>
<a href = "#" class = "nav-links">Skills</a>
<a href = "#" class = "nav-links ">About Me</a>
</nav>
</header>
<div class = "about-container">
<h1 class = "title">About Me</h1> //this is the h1 i am trying to edit
</div>
</body>
</html>
----------------------------------------CSS-------------------------------------
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: sans-serif;
padding: 0;
}
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
}
.nav-links{
float: right;
color: white;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 4px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.about-container{
position: relative;
width: 100%;
height: 600px;
margin-bottom: 40px;
background-color: #d8d8d8;
margin-top: 0;
}
.title{
color: #777777;
text-align: center;
margin: 0px;
margin-top: 20px;
}
【问题讨论】：
-
这可能是由于折叠边距。最简单的解决方案是在包装器上使用填充而不是标题上的边距