GreenSaucer42
Reputation: 49
How to remove space between section tags
I'm having some trouble removing the space between the two sections of my code.
Here is the JSFiddle 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----------------------------->Upvotes: 1
Views: 46
Answers (1)
Michael Coker
Reputation: 53674
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.
Here's a resource - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
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>[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----------------------------->Upvotes: 4
Related Questions
- How to reduce padding in css? (section class)
- How to set the right space between my sections in css?
- How I can remove the space between the elements in html
- How to remove insane gap between my sections
- Removing space between heading and div
- Removing white space between two sections
- Remove White Spaces Between HTML Sections
- How do I get rid of whitespace between sections CSS/HTML
- I want to remove unnecessary blank spaces adding between tags
- How do I make space between <nav> and <section>