What's the best way to eliminate the space between vertically aligned divs?

Question

What's the best way to eliminate the space between vertically aligned divs?

I've been attempting to adjust the space between div 1 and div 2, but despite adjusting margins and padding, the gap persists. When modifying properties on the parent div, the children divs end up extending beyond the parent. I realize my approach to this problem may be misguided. Thank you for any assistance.

html {
overflow:
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  margin: 0; /* remove default margin */
  transition-property: background-position;
}
/* More CSS code... */

html css

Answer 1

Answer №1

Default browser styles come with <p> elements having a default top and bottom margin of 1em. To remove these default paragraph styles, you can add the following CSS rule:

#subtitle p {
  margin: 0;
}

Answer 2

Default browser styles come with <p> elements having a default top and bottom margin of 1em. To remove these default paragraph styles, you can add the following CSS rule:

#subtitle p {
  margin: 0;
}

Answer 3

Answer №2

Adjust the #subhead p to have a margin: 0;. Remove the margin-left: 20px; on #vis and consider adding a padding-left: 20px; to align text with div1's content. The empty values on #quote paddings have been commented out for clarity as well.

html {
  overflow:
}
body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  margin: 0;
  /* remove default margin */
  transition-property: background-position;
}
#subhead p {
  margin: 0;
}
div#container {
  height: 100%;
  margin: 0;
}
<div#static_nav {
  width: 100%;
  height: 2em;
  padding-top: 10px;
  position: fixed;
  z-index: 999;
}
.static_nav_full {
  background-color: #3A3D3F;
  transition: background-color 2s;
  opacity: .90;
}
.navbar {
  font-family: 'Source Sans Pro', sans-serif;
  padding-right: 20px;
  background-color: transparent;
  text-align: right;
}
div#static_nav a {
  color: white;
  text-decoration: none;
  padding-right: 20px;
}
div#static_nav a:hover {
  color: #8E8E8E;
}
div#block_one,
div#block_two,
div#block_three,
div#block_four {
  height: 100vh;
  z-index: 1;
  padding-top: 51px;
  width: 100%;
}
div#block_one {
  background-image: url(https://images5.alphacoders.com/439/thumb-1920-439361.jpg);
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background-repeat: no-repeat;
  position: relative;
}
div#logo {
  background-image: url(http://www.clker.com/cliparts/C/k/d/o/B/3/white-peace-sign-hi.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  z-index: -1;
}
.heading {
  padding-top: 10px;
  padding-bottom: 20px;
  width: 90%;
  height: 1em;
  border-top: 2px solid #A8A8A8;
  margin: 0 auto;
  font-size: 40px;
  font-family: 'Hind Guntur', sans-serif;
}
div#subhead {
  width: 88.8%;
  margin: 0 auto;
  border-left: 5px solid #D8D8D8;
  text-indent: inherit;
  background-color: blue;
}
div#quote {
  /*padding-top: ;
  padding-bottom: ;*/
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  font-size: 18px;
  height: 50%;
  background-color: red;
  margin: 0 auto;
}
div#vis {
  /*margin-left: 20px;*/
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  background-color: red;
  height: 50%;
}
div#block_five {
  height: 30vh;
  background-color: #F5F5F5;
}

<!DOCTYPE html>

<html lang="en">
<meta charset="utf-8" />

<head>
  <link rel="stylesheet" type="text/css" href="tof_css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Kanit|Heebo|Source+Sans+Pro:200|Hind+Guntur:Regular">

</head>

<body>
  <div id="container">

    <header>
      <div id="static_nav">
        <nav class="navbar">
          <a href="#block_one">Home</a>
          <a href="#block_two">About</a>
          <a href="#block_four">People</a>
          <a href="#block_five">Contact</a>
          <a href="">Log In</a>
        </nav>
      </div>
    </header>


    <div id="block_one">
      <div id="logo">
      </div>
    </div>

    <div id="block_two">
      <header class="heading">
        TEST
      </header>
      <div id="subhead">
        <div id="quote">
          <p>Div 1</p>
        </div>
        <div id="vis">
          <p>Div 2</p>
        </div>
      </div>

      <div id="block_three">
      </div>

      <div id="block_four">
      </div>

      <div id="block_five">
      </div>

    </div>

</html>

Answer 4

Adjust the #subhead p to have a margin: 0;. Remove the margin-left: 20px; on #vis and consider adding a padding-left: 20px; to align text with div1's content. The empty values on #quote paddings have been commented out for clarity as well.

html {
  overflow:
}
body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  margin: 0;
  /* remove default margin */
  transition-property: background-position;
}
#subhead p {
  margin: 0;
}
div#container {
  height: 100%;
  margin: 0;
}
<div#static_nav {
  width: 100%;
  height: 2em;
  padding-top: 10px;
  position: fixed;
  z-index: 999;
}
.static_nav_full {
  background-color: #3A3D3F;
  transition: background-color 2s;
  opacity: .90;
}
.navbar {
  font-family: 'Source Sans Pro', sans-serif;
  padding-right: 20px;
  background-color: transparent;
  text-align: right;
}
div#static_nav a {
  color: white;
  text-decoration: none;
  padding-right: 20px;
}
div#static_nav a:hover {
  color: #8E8E8E;
}
div#block_one,
div#block_two,
div#block_three,
div#block_four {
  height: 100vh;
  z-index: 1;
  padding-top: 51px;
  width: 100%;
}
div#block_one {
  background-image: url(https://images5.alphacoders.com/439/thumb-1920-439361.jpg);
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background-repeat: no-repeat;
  position: relative;
}
div#logo {
  background-image: url(http://www.clker.com/cliparts/C/k/d/o/B/3/white-peace-sign-hi.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  z-index: -1;
}
.heading {
  padding-top: 10px;
  padding-bottom: 20px;
  width: 90%;
  height: 1em;
  border-top: 2px solid #A8A8A8;
  margin: 0 auto;
  font-size: 40px;
  font-family: 'Hind Guntur', sans-serif;
}
div#subhead {
  width: 88.8%;
  margin: 0 auto;
  border-left: 5px solid #D8D8D8;
  text-indent: inherit;
  background-color: blue;
}
div#quote {
  /*padding-top: ;
  padding-bottom: ;*/
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  font-size: 18px;
  height: 50%;
  background-color: red;
  margin: 0 auto;
}
div#vis {
  /*margin-left: 20px;*/
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  background-color: red;
  height: 50%;
}
div#block_five {
  height: 30vh;
  background-color: #F5F5F5;
}

<!DOCTYPE html>

<html lang="en">
<meta charset="utf-8" />

<head>
  <link rel="stylesheet" type="text/css" href="tof_css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Kanit|Heebo|Source+Sans+Pro:200|Hind+Guntur:Regular">

</head>

<body>
  <div id="container">

    <header>
      <div id="static_nav">
        <nav class="navbar">
          <a href="#block_one">Home</a>
          <a href="#block_two">About</a>
          <a href="#block_four">People</a>
          <a href="#block_five">Contact</a>
          <a href="">Log In</a>
        </nav>
      </div>
    </header>


    <div id="block_one">
      <div id="logo">
      </div>
    </div>

    <div id="block_two">
      <header class="heading">
        TEST
      </header>
      <div id="subhead">
        <div id="quote">
          <p>Div 1</p>
        </div>
        <div id="vis">
          <p>Div 2</p>
        </div>
      </div>

      <div id="block_three">
      </div>

      <div id="block_four">
      </div>

      <div id="block_five">
      </div>

    </div>

</html>

Answer 5

Answer №3

There is an issue with the margin-top on your p element under #vis, removing it will eliminate the gap

#vis p {
  margin: 0;
}

Answer 6

There is an issue with the margin-top on your p element under #vis, removing it will eliminate the gap

#vis p {
  margin: 0;
}

What's the best way to eliminate the space between vertically aligned divs?

Answer №1

Answer №2

Answer №3

Similar questions

Getting the value of "Page=?" from the href attribute in an HTML tag can be done using Selenium Webdriver and Java

Converting JSON data to HTML using Handlebars

CSS hover effect not working while mouse is in motion

display the entire calendar for the chosen month

Is there a WebKit equivalent to the MDC (Mozilla Documentation Center)?

Display modal after drop-down selection, triggered by API response

Mastering the nav-item class in Bootstrap 4 for optimal navigation functionality

How can you determine the dimensions of an image in HTML using Python?

As the Div descends, it endeavors to maintain alignment with its counterparts

Create unique pages based on varying content types

Storing user input into a MySQL database with NodeJS and Express

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

Tips for displaying JSON data by formatting it into separate div elements for the result object

Always ensure that only one div is visible at a time

"Encountering issue with SCSS variable not being applied to background in file

Adding the "input-invalid" class to the input doesn't take effect until I click outside of the input field

Angular is sending a parameter with a null value, which is not supposed to happen

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

Issue regarding the functionality of CSS styling when applied to a button

The system considers the resource as a script, yet it was transmitted with the MIME type of text