Question

不知何故，名字＆＃34; Larry Rosenburg＆＃34;之间存在固定的空白区域。以及它下面的图片。无论我如何改变边距，它都不会影响距离。这是一个屏幕截图screenshot!

如何缩短空白区域？

这是我的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

margin: 30px auto;的CSS #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;
}

[here the screenshot][checked]

Answer 3

试试这个。

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

图像上可能还有一些边缘顶部。

在第一个标题后，如何更改标题和div之间的空白？

3 个答案: