不知何故，在"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;
}
您的 CSS margin: 30px auto; 的 #profile-pic 将上边距和下边距设置为 30px。这就是你看到的空白。可以单独设置边距，也可以一次设置所有边距。不要使用当前样式。
在发布此类问题之前，请尝试使用任何 Web 浏览器检查 html 元素。所有 Web 浏览器都显示元素的布局和边距。它将帮助您更快地解决问题。
我已经
编辑了这个。 现在您可以尝试此操作，因为它在我的设备中工作正常。
#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;
}
此处为截图][已检查]
试试这个。
<p style="margin-bottom:0px">Larry Rosenburg </p>
图像上也可能有一些边距顶部。