嘿,我正在为我的投资组合工作,我试图删除上面的空白,我有我的h1在div。我添加了一个h1,但我不想让它一直在div的顶部,所以当我添加一个margin-top时,它会在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;
}
您可以简单地从margin-top: 20px;
切换到padding-top: 20px;
编辑
边距和内边距是不同的,因为边距将元素与其他元素分开,而内边距只是添加了一些"透明"空间,增加了元素的大小,但它使元素与其他元素保持接近,如果你想了解更多,请阅读:
https://css-tricks.com/almanac/properties/p/padding/https://css-tricks.com/almanac/properties/m/margin/