如何删除部分标签之间的空间 [英] How to remove space between section tags
本文介绍了如何删除部分标签之间的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在删除代码两部分之间的空间时遇到了一些麻烦。
I'm having some trouble removing the space between the two sections of my code.
这是 JSF我的代码中间。
/********************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>e@gmail.com</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.
这里是资源- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
如果没有边框，内边距，内联内容，创建的block_formatting_context或间隙以将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，内边距，内嵌内容，高度，最小高度或最大高度将块的边距底部与最后一个子元素的边距底部分开，然后这些边距崩溃。折叠后的边距最终位于父级之外。
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
/********************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>e@gmail.com</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----------------------------->
这篇关于如何删除部分标签之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
