Question

嘿，我正在为我的投资组合工作，我试图删除div上面的空白我有我的h1。我添加了一个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;



}

Answer 1

您只需从margin-top: 20px;切换到padding-top: 20px;

即可

修改

边距和填充是不同的，因为边距将元素与另一个元素分开，并且填充只是添加一些＆＃34;透明＆＃34;如果你想更多地了解这个元素，那么增加元素大小的空间会使它与其他元素保持接近：

https://css-tricks.com/almanac/properties/p/padding/

https://css-tricks.com/almanac/properties/m/margin/

将margin-top设置为h1后，如何删除div上方的空格？

1 个答案: