csshtmlwhitespacesections
Removing white space between two sections
I have two sections as such:
<section id="achievements"> ... </section>
<section id="services"> ... </section>
There is a white space coming in between them. While this is not so for the rest of my sections.
I have not set any display property for the sections, but it is inheriting the display property of block from a css file. (on checking from developer tool in Chrome)
I also checked the contents of both the sections if anything is coming out the sections for some reason. This does not seem to be the case.
What is causing this white space and how can I remove it?
PS: Let me know if I should add more information.
PS2: The posts I have checked out on this site talk about removing whitespace from inline-block elements.
Update
Here is the Fiddle of the relevant part:
/* main */
body {
font-family: "Montserrat", sans-serif;
margin: 0px;
padding: 0px;
}
.upper {
text-transform: uppercase;
}
/* Positioning */
.vertically_centered {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.left {
float: left;
}
.right {
float: right;
}
/* For tagline sections in 5 articles */
.tagline {
height: 305px;
padding: 0;
margin: 0;
}
.tagline_text {
margin: auto;
text-align: center;
}
.tagline_sub {
font-size: 18px;
color: #999999;
}
.bottom_line:after {
content: "";
display: block;
width: 60px;
border-bottom: 3px solid #b3b3b3;
margin: 30px auto 40px;
}
/* row 4: achievements */
#achievements,
#achievements article {
height: 320px;
margin: 0px;
padding: 0px;
}
#experiments {
background-color: #1a1a1a;
width: 33.33%;
height: 320px;
}
#awards {
background-color: #212121;
width: 33.33%;
height: 320px;
}
#messages {
background-color: #262626;
width: 33.33%;
height: 320px;
}
.results {
margin: auto;
height: 35%;
width: 75%;
text-align: center;
}
.data_set {
width: 70%;
}
.number {
font-size: 42px;
color: white;
}
.details {
font-size: 16px;
color: #cccccc;
}
.first_icon_set {
max-width: 30%;
height: auto;
}
/* row 5: services */
#services {
background-color: #e6e6e6;
height: 1005px;
margin: 0px;
padding: 0px;
}
#services_details {
height: 700px;
width: 100%;
}
.services_box {
background-color: white;
width: 32%;
height: 330px;
margin: 20px 0.66% 0% 0.66%;
text-align: center;
}
.services_box p {
padding: 0 15px 0 20px;
}
.icon_set_services {
width: 60%;
}
#services_details_sub {
margin-top: 25px;
font-size: 14px;
color: #999999;
line-height: 25px;
}<div class="">
<!-- row 4: achievements -->
<section class="" id="achievements">
<article id="experiments" class="left">
<section class="results vertically_centered">
<img src="icons/flask.svg" alt="enigma_flask_icon" class="first_icon_set left"></img>
<div class="data_set upper left">
<p class="number">1200</p>
<p class="details">design experiments</p>
</div>
</section>
</article>
<article id="awards" class="left">
<section class="results vertically_centered">
<img src="icons/trophy.svg" alt="enigma_trophy_icon" class="first_icon_set left"></img>
<div class="data_set upper left">
<p class="number">578</p>
<p class="details">awards won</p>
</div>
</section>
</article>
<article id="messages" class="left">
<section class="results vertically_centered">
<img src="icons/envelope.svg" alt="enigma_trophy_icon" class="first_icon_set left"></img>
<div class="data_set upper left">
<p class="number">12489</p>
<p class="details">messages sent</p>
</div>
</section>
</article>
</section>
<!-- Remove white space from top-->
<!-- row 5: services -->
<section id="services">
<article class="tagline">
<section class="tagline_text vertically_centered">
<h2 class="upper bottom_line">Our services</h2>
<p class="tagline_sub">Continuously Creating Daring Digital Solutions</p>
</section>
</article>
<article id="services_details">
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/star.svg" alt="enigma_star_icon" class="icon_set_services"></img>
<h4 class="upper">Great design</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/files.svg" alt="enigma_files_icon" class="icon_set_services"></img>
<h4 class="upper">Perfect coding</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/graph.svg" alt="enigma_graph_icon" class="icon_set_services"></img>
<h4 class="upper">Marketing</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/face.svg" alt="enigma_face_icon" class="icon_set_services"></img>
<h4 class="upper">Support</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/gear.svg" alt="enigma_gear_icon" class="icon_set_services"></img>
<h4 class="upper">Development</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/screen.svg" alt="enigma_screen_icon" class="icon_set_services"></img>
<h4 class="upper">Web design</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
</article>
</section>
</div>Solution
This is the so called collapsed margins
you need to reset the default margin from child h2
Note:
careful img is a self closing tag
/* main */
body {
font-family: "Montserrat", sans-serif;
margin: 0px;
padding: 0px;
}
.upper {
text-transform: uppercase;
margin:0
}
/* Positioning */
.vertically_centered {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.left {
float: left;
}
.right {
float: right;
}
/* For tagline sections in 5 articles */
.tagline {
height: 305px;
padding: 0;
margin: 0;
}
.tagline_text {
margin: auto;
text-align: center;
}
.tagline_sub {
font-size: 18px;
color: #999999;
}
.bottom_line:after {
content: "";
display: block;
width: 60px;
border-bottom: 3px solid #b3b3b3;
margin: 30px auto 40px;
}
/* row 4: achievements */
#achievements,
#achievements article {
height: 320px;
margin: 0px;
padding: 0px;
}
#experiments {
background-color: #1a1a1a;
width: 33.33%;
height: 320px;
}
#awards {
background-color: #212121;
width: 33.33%;
height: 320px;
}
#messages {
background-color: #262626;
width: 33.33%;
height: 320px;
}
.results {
margin: auto;
height: 35%;
width: 75%;
text-align: center;
}
.data_set {
width: 70%;
}
.number {
font-size: 42px;
color: white;
}
.details {
font-size: 16px;
color: #cccccc;
}
.first_icon_set {
max-width: 30%;
height: auto;
}
/* row 5: services */
#services {
background-color: #e6e6e6;
height: 1005px;
margin: 0px;
padding: 0px;
}
#services_details {
height: 700px;
width: 100%;
}
.services_box {
background-color: white;
width: 32%;
height: 330px;
margin: 20px 0.66% 0% 0.66%;
text-align: center;
}
.services_box p {
padding: 0 15px 0 20px;
}
.icon_set_services {
width: 60%;
}
#services_details_sub {
margin-top: 25px;
font-size: 14px;
color: #999999;
line-height: 25px;
}<div class="">
<!-- row 4: achievements -->
<section class="" id="achievements">
<article id="experiments" class="left">
<section class="results vertically_centered">
<img src="icons/flask.svg" alt="enigma_flask_icon" class="first_icon_set left"/>
<div class="data_set upper left">
<p class="number">1200</p>
<p class="details">design experiments</p>
</div>
</section>
</article>
<article id="awards" class="left">
<section class="results vertically_centered">
<img src="icons/trophy.svg" alt="enigma_trophy_icon" class="first_icon_set left"/>
<div class="data_set upper left">
<p class="number">578</p>
<p class="details">awards won</p>
</div>
</section>
</article>
<article id="messages" class="left">
<section class="results vertically_centered">
<img src="icons/envelope.svg" alt="enigma_trophy_icon" class="first_icon_set left"/>
<div class="data_set upper left">
<p class="number">12489</p>
<p class="details">messages sent</p>
</div>
</section>
</article>
</section>
<!-- Remove white space from top-->
<!-- row 5: services -->
<section id="services">
<article class="tagline">
<section class="tagline_text vertically_centered">
<h2 class="upper bottom_line">Our services</h2>
<p class="tagline_sub">Continuously Creating Daring Digital Solutions</p>
</section>
</article>
<article id="services_details">
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/star.svg" alt="enigma_star_icon" class="icon_set_services"/>
<h4 class="upper">Great design</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/files.svg" alt="enigma_files_icon" class="icon_set_services"/>
<h4 class="upper">Perfect coding</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/graph.svg" alt="enigma_graph_icon" class="icon_set_services"/>
<h4 class="upper">Marketing</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/face.svg" alt="enigma_face_icon" class="icon_set_services"/>
<h4 class="upper">Support</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/gear.svg" alt="enigma_gear_icon" class="icon_set_services"/>
<h4 class="upper">Development</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
<section class="services_box left">
<div class="vertically_centered">
<img src="icons/screen.svg" alt="enigma_screen_icon" class="icon_set_services"/>
<h4 class="upper">Web design</h4>
<p id="services_details_sub">Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.</p>
</div>
</section>
</article>
</section>
</div>- Calculating using sass variables for properties with multiple values
- Vertical align in bootstrap table
- React Native Modal Transparent Not Working
- How to disable external CSS in browser for testing?
- How do I right align div elements?
- Html and css to add colorful codes
- How to insert a line break in ::before of an element using CSS and attr()
- Strange MUI Grid behavior when using spacing
- Background image in tailwindcss using dynamic url (React.js)
- how to get a full page web app even in safari?
- When hover over img, all other images blur using CSS :not(:hover)
- Bootstrap-Select : remove ugly focus border
- Pure CSS Continuous Horizontal Text Scroll Without Break
- Matter.js Mouse Controls Setup
- <li> style overrides css with flexslider
- How to change scrollbar when using Tailwind (next.js/react)
- How do you specify table padding in CSS? (table, not cell, padding )
- How to debug CSS?
- How do I create a css rule, to undo other background on a ::selection node
- Grid Styling - Overwrite style of ag-grid
- how to stop background-color: buttonface; on submit button?
- How (and why) to use CSS "display: table-cell"?
- How do I make a placeholder for a 'select' box?
- How to determine if CSS has been loaded?
- Why isn't my CSS animation-timeline: view() working?
- jQuery UI 1.10: dialog and zIndex option
- How can I move my hamburger menu to the top right?
- How to keep a HTML Submenu Opened When Clicking on Other
- How to implement a language selector via JS that overrides global CSS
- Why is Chrome rendering the Font in "extra light" and Safari not?