在第一個標頭之后，如何更改標頭和div之間的空白？

Question

在“拉里·羅森堡”（Larry Rosenburg）這個名字和下面的圖片之間，有某種固定的空白。 無論我如何更改邊距，它都不會影響距離。 這是屏幕截圖！

如何縮短空白？

這是我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Larry Rosenburg Official Website </title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
    </head>

    <body>
        <header>
            <div id="logo">
                <img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture">
                <nav>
                    <ul>
                        <li> <a href="index.html"> Home </a> </li>
                        <li> <a href="http://www.lincolnlandservices.com/index.html"> Lincoln </a> </li>
                        <li> <a href="about.html"> About </a> </li>
                        <li> <a href="contact.html"> Contact </a> </li>
                    </ul>
                </nav>

            </div>
        </header>
        <div class="clearfix">  </div>

        <div id="title"> 
            <p>Larry Rosenburg </p>
        </div> 

        <div id="profile">
            <img src="picture.jpg" width="25%" alt="" id="profile-pic" >
        </div>
    </body>
    <footer>
    </footer>

</html>

這是CSS：

body{
    width: 100%;
}
#logo_picture{
    margin-left: 80px;
}

#logo img, #logo nav{
    float: left;
}
#logo nav{
    line-height: 120px;
    margin-left: 250px;
}
nav ul{
    list-style: none;
    margin: 0 10px;
    padding: 0;

}

nav li{
    display: inline;
}

nav a{
    color: black;
    font-size: 20px;
    font-family:'Arsenal', 'sans-serif';
    font-weight: 300;
    padding: 2px 38px;
    text-decoration:none;
}

nav a, nav a:visited {
    color: black;
}

nav a.selected, nav a:hover{
    color: grey;
}

#title{
    font-size: 70px;
    margin-top: 70px;
    margin-bottom: 0;
    text-align: center;
    font-family: 'Anton','sans-serif';

}
#profile-pic{
    border-radius: 30px;
    background: url('picture.jpg');
    margin: 30px auto;
    display: block;
    padding: 0;
    border-top: 0;

}



.clearfix {
  clear: both;
}

Answer 1

您的CSS margin: 30px auto; #profile-pic的頂部和底部邊距設置為30px。 那就是您看到的空白。 可以單獨設置邊距，也可以一次全部設置。 不要使用當前樣式。

在發布這樣的問題之前，請嘗試使用任何Web瀏覽器檢查html元素。 所有Web瀏覽器都顯示元素的布局和邊距。 這將幫助您更快地解決問題。

Answer 2

我已經編輯了。 現在您可以嘗試一下，因為它可以在我的設備上正常工作。

 #profile-pic {
    background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0;
    border-radius: 30px;
    border-top: 0 none;
    display: block;
    margin: -60px auto;
    padding: 0;
}

[這里的屏幕截圖] [已檢查]

Answer 3

嘗試這個。

<p style="margin-bottom:0px">Larry Rosenburg </p>

圖像上也可能有一些頁邊空白。

在第一個標頭之后，如何更改標頭和div之間的空白？

問題描述

3 個解決方案

解決方案1
1 2017-01-21 17:01:36

解決方案2
0 2017-01-21 17:06:46

解決方案3
-1 2017-01-21 17:01:56

在第一個標頭之后，如何更改標頭和div之間的空白？

問題描述

3 個解決方案

解決方案1 1 2017-01-21 17:01:36

解決方案2 0 2017-01-21 17:06:46

解決方案3 -1 2017-01-21 17:01:56

解決方案1
1 2017-01-21 17:01:36

解決方案2
0 2017-01-21 17:06:46

解決方案3
-1 2017-01-21 17:01:56