gpt4 book ai didi

html - 如何在我的第一个标题之后更改标题和 div 之间的空白区域?

转载 作者:行者123 更新时间:2023-11-28 04:29:59 26 4
gpt4 key购买 nike

名字“Larry Rosenburg”和下面的图片之间不知何故有这个固定的空白。无论我如何更改边距,都不会影响距离。这是一个屏幕截图 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;
}

最佳答案

#profile-pic 的 CSS margin: 30px auto; 将顶部和底部边距设置为 30px。那就是你看到的空白。单独设置边距或一次设置所有边距。不要使用当前样式。

在发布此类问题之前,请尝试使用任何网络浏览器检查 html 元素。所有网络浏览器都显示元素的布局和边距。它将帮助您更快地解决问题。

关于html - 如何在我的第一个标题之后更改标题和 div 之间的空白区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41781993/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com