我的作业要求我在彼此的顶部有两个标签。但是我想摆脱两者之间存在这种令人讨厌的差距。差距之间是背景图像,与网站的其他部分看起来不太好。感谢所有能帮助我的人。
这是我的HTML:
<section>
<div id="profileSection">
<div class="row">
<div class="col-xs-4 col-sm-8 col-md-12">
<h1 id="profileTitle">About Me</h1>
<p id="profileDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu justo quam. Donec et magna ante. Integer ullamcorper sit amet erat a pharetra. Aliquam euismod, mauris sit amet ultricies sodales, purus enim dictum dui, in mattis quam ex non neque. Suspendisse quis tristique tellus. Vestibulum dignissim eros non arcu sollicitudin, a auctor augue faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sit amet dui pulvinar, interdum arcu et, consequat dui. Fusce velit elit, molestie sed tincidunt eget, ornare in nibh. Nunc aliquet dapibus odio sit amet varius. Suspendisse nec ipsum odio. Morbi iaculis velit eget mi tristique dignissim. Donec rutrum gravida ex, vel molestie sapien condimentum quis. Morbi convallis placerat eros ac volutpat.</p>
<img id="profilePic" src="pics/profilePicture.png" />
</div>
</div>
</div>
<section>
<div id="skillsSection">
<h1 id="skillsTitle">Skills</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
CSS:
#profileSection {
margin-top: 300px;
padding-right: 400px;
padding-left: 400px;
background-color: #F5F5F5;
height: auto;
width: 100%: }
#profileTitle {
display: inline-block;
margin-top: 25px;
font-family: 'Francois One', sans-serif;
text-decoration: underline; }
#profileDesc {
float: left;
width: 50%;
margin-top: 70px;
font-family: 'Open Sans', sans-serif; }
#profilePic {
float: right;
margin-top: 70px;
width: 200px;
height: 200px; }
#mainTitle {
text-align: center;
margin-top: 300px; }
#skillsSection {
padding-right: 400px;
padding-left: 400px;
background-color: #181818; }
感谢任何可以提供帮助的人
答案 0 :(得分:0)
您应该删除/覆盖标题的上边距。
#skillsTitle {
margin-top: 0;
}