本文介绍了如何删除部分标签之间的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在删除代码两部分之间的空间时遇到了一些麻烦。
I'm having some trouble removing the space between the two sections of my code.
这是。
/********************Intro**********************/
.intro-content {
padding-top: 250px;
}
.intro-content h1 {
font-family: "Arial Black";
font-weight: bolder;
}
#typed {
font-family: monospace;
font-size: 20px;
}
.button {
padding-top: 50px;
}
.button button {
background-color: black;
border-color: black;
border-radius: 25px;
color: white;
font-weight: bolder;
margin-bottom: 22%;
}
/********************Intro*********************/
/********************Contact*********************/
#about {
background-color: lightgray;
}
#skill {
background-color: lightblue;
}
#intro-section {
background-color: lightgreen;
}
.contact-info h4 {
font-family: "Arial Black";
font-weight: bolder;
}
.contact-icon {
padding-top: 50px;
}
.contact-block {
padding-top: 20px;
align-content: center;
margin-left: 5%;
}
.aboutme h1 {
padding-top: 50px;
margin-left: 50px;
font-family: "Arial Black";
font-size: 50px;
color: black;
font-weight: bolder;
text-shadow: 2px 2px darkgray;
}
.my-contact .contact-info {
display: table-cell;
font-size: 18px;
}
.my-contact .contact-icon span {
font-size: 20px;
margin-right: 15px;
float: left;
margin-top: 25px;
}
.contact-summary {
padding-top: 70px;
font-style: italic;
font-size: 20px;
}
.contact-developer {
padding-top: 95px;
margin-bottom: 7%;
font-size: 15px;
font-weight: bold;
}
/********************Contact*********************/<!----------------------Intro-------------------------------->
<section id="intro-section" class="intro">
<div class="intro-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h1>HELLO, I'M ERIC.</h1>
<div id="typed-strings">
<p>Welcome to my personal website!</p>
<p>UI DESIGNER / WEB DEVELOPER</p>
</div>
<span id="typed"></span>
<div class="button">
<button>GET IN TOUCH</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Intro----------------------------->
<!----------------------Contact----------------------------->
<section id="about" class="aboutme">
<h1>ABOUT ME</h1>
<div class="container-fluid">
<div class="contact-block clearfix">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-summary">
<p>Welcome to my personal website! My name is Eric Holdridge. I'm a web developer and UI designer. I have been web developing for 2 years.
I love creating beautiful and responsive websites for anyone. Most web designers won't put in the time and effort to create a
fully functional website. If you have an idea, I will make it happen. You can reach me at
one of my contact options below.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-user"></span>
<div class="contact-info">
<h4>Name:</h4>
<p>Eric</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-envelope"></span>
<div class="contact-info">
<h4>Email:</h4>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-phone"></span>
<div class="contact-info">
<h4>Phone:</h4>
<p>(563)</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-calendar"></span>
<div class="contact-info">
<h4>Date of Birth:</h4>
<p>April</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-globe"></span>
<div class="contact-info">
<h4>Location:</h4>
<p></p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-flag"></span>
<div class="contact-info">
<h4>Nationality:</h4>
<p>United States</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-developer">
<p>CREATIVE FRONT-END AND BACK-END DEVELOPER.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Contact----------------------------->推荐答案
这就是您的 h1 在父代之外崩溃的利润。有很多解决方法，因此我删除了 h1 的上边距。
That's the margin on your h1's collapsing outside of the parent. There are a bunch of ways to fix it, so I just removed the top margin on h1.
这里是资源-
/********************Intro**********************/
.intro-content {
padding-top: 250px;
}
.intro-content h1 {
font-family: "Arial Black";
font-weight: bolder;
}
#typed {
font-family: monospace;
font-size: 20px;
}
.button {
padding-top: 50px;
}
.button button {
background-color: black;
border-color: black;
border-radius: 25px;
color: white;
font-weight: bolder;
margin-bottom: 22%;
}
/********************Intro*********************/
/********************Contact*********************/
#about {
background-color: lightgray;
}
#skill {
background-color: lightblue;
}
#intro-section {
background-color: lightgreen;
}
.contact-info h4 {
font-family: "Arial Black";
font-weight: bolder;
}
.contact-icon {
padding-top: 50px;
}
.contact-block {
padding-top: 20px;
align-content: center;
margin-left: 5%;
}
.aboutme h1 {
padding-top: 50px;
margin-left: 50px;
font-family: "Arial Black";
font-size: 50px;
color: black;
font-weight: bolder;
text-shadow: 2px 2px darkgray;
}
.my-contact .contact-info {
display: table-cell;
font-size: 18px;
}
.my-contact .contact-icon span {
font-size: 20px;
margin-right: 15px;
float: left;
margin-top: 25px;
}
.contact-summary {
padding-top: 70px;
font-style: italic;
font-size: 20px;
}
.contact-developer {
padding-top: 95px;
margin-bottom: 7%;
font-size: 15px;
font-weight: bold;
}
/********************Contact*********************/
h1 {
margin-top: 0;
}<!----------------------Intro-------------------------------->
<section id="intro-section" class="intro">
<div class="intro-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h1>HELLO, I'M ERIC.</h1>
<div id="typed-strings">
<p>Welcome to my personal website!</p>
<p>UI DESIGNER / WEB DEVELOPER</p>
</div>
<span id="typed"></span>
<div class="button">
<button>GET IN TOUCH</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Intro----------------------------->
<!----------------------Contact----------------------------->
<section id="about" class="aboutme">
<h1>ABOUT ME</h1>
<div class="container-fluid">
<div class="contact-block clearfix">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-summary">
<p>Welcome to my personal website! My name is Eric Holdridge. I'm a web developer and UI designer. I have been web developing for 2 years.
I love creating beautiful and responsive websites for anyone. Most web designers won't put in the time and effort to create a
fully functional website. If you have an idea, I will make it happen. You can reach me at
one of my contact options below.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-user"></span>
<div class="contact-info">
<h4>Name:</h4>
<p>Eric</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-envelope"></span>
<div class="contact-info">
<h4>Email:</h4>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-phone"></span>
<div class="contact-info">
<h4>Phone:</h4>
<p>(563)</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-calendar"></span>
<div class="contact-info">
<h4>Date of Birth:</h4>
<p>April</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-globe"></span>
<div class="contact-info">
<h4>Location:</h4>
<p></p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="my-contact clearfix">
<div class="contact-icon">
<span class="glyphicon glyphicon-flag"></span>
<div class="contact-info">
<h4>Nationality:</h4>
<p>United States</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="contact-developer">
<p>CREATIVE FRONT-END AND BACK-END DEVELOPER.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Contact----------------------------->这篇关于如何删除部分标签之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！