Css - Getting rid of annoying space between objects

Question

I'm new at web design, I want to get ride of an annoying space between two <div> with CSS: Annoying space between (in the red circle)

I'm using this code:

HTML:

<html>
<head>
    <link rel="stylesheet" href="../css/index.css">
    <title> FalquOS: Index </title>
</head>
<body>
    <div id="Section1">
        <p> Section 01 </p>
    </div>
    <div id="Section2">
        <p> Section 02 </p>
    </div>
    <div id="Section3">
        <p> Section 03 </p>
    </div>      
    <script src="../js/index.js"></script>
</body>

And CSS:

   #Section1 {
        width: 100%;
        height: 500px;  
        background: #ff7f29;
        border-radius: 10px 10px 0px 0px;
    }

    #Section2 {
        width: 100%;
        height: 500px;
        background: #f3dc4f;    
    }

    #Section3 {
        width: 100%;
        height: 500px;
        background: #f34f4f;
        border-radius: 0px 0px 10px 10px;   
    }
    p {
        text-align: center;
        font-size: 25px;
        color: white;
        position: relative;
        top: 200px;
        font-family: monospace;
    }

I've been trying things that may help like margin but that doesn't work :(

It would be helpful if you posted the relevant code here as well — Dan, May 06 '18 at 18:19

Dhaval Jardosh · Answer 1 · 2018-05-06T22:15:10.997

With display:block it will still consider the margin-top from it's children which in your case is p

<p> by default has margin-top:1em and margin-bottom:1em

What's in my example?

I have made slight modification in Section 2 take a look at it, I'm sure you will get the idea how margin-top is creating the annoying space.

var up = true;
var value = 20;
var increment = 10;
var ceiling = 500;

function PerformCalc() {
  if (up == true && value <= ceiling) {
    value += increment

    if (value == ceiling) {
      up = false;
    }
  } else {
    up = false
    value -= increment;

    if (value == 0) {
      up = true;
    }
  }

  document.getElementById('Section1').style.height = value + 'px';
  document.getElementById('Section2').style.height = value + 'px';
  document.getElementById('Section3').style.height = value + 'px';
}
setInterval(PerformCalc, 100);

body {
  background: grey;
}

#Section1 {
  display: block;
  width: 100%;
  background: #ff7f29;
  border-radius: 10px 10px 0px 0px;
}

#Section2 {
  width: 100%;
  background: #f23;
  border-radius: 10px 10px 0px 0px;
  color: white;
  font-family: monospace;
  font-size: 25px;
  text-align: center;
}

small {
  font-size: 25px;
  /* ;) */
  display: block;
  position: relative;
  top: 200px;
}

#Section3 {
  width: 100%;
  background: #8f7;
  border-radius: 10px 10px 0px 0px;
}

p {
  text-align: center;
  font-size: 25px;
  color: white;
  position: relative;
  top: 200px;
  font-family: monospace;
}

<body>
  <div id="Section1" class="no-margin">
    <p> Section 01 </p>
  </div>
  <div id="Section2">
    <small>Section 02</small>
  </div>
  <div id="Section3">
    <p> Section 03 </p>
  </div>
  <!--     <script src="../js/index.js"></script> -->
</body>

this answer is half correct, you should explain why the margin of p is creating this issue — Temani Afif, May 06 '18 at 19:25

Thomas Darvik · Accepted Answer · 2018-05-06T18:43:10.230

0

Edit: Now that you added code

Add a class to your sections with className="section" and make a new CSS class where you remove the margins:

.section { margin: 0 };

As others have suggested it can also be the p elements, so you can remove the margin from that one too by writing (in this case)

.section p { margin: 0 }; to target the p element inside the .section

In the CSS file where the sections are styled, remove margins: margin: 0; and maybe padding padding: 0;. Margin is used to add distance between the sections, and padding is used as "spacing" inside the section.

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

Read more about the Box model on W3 Schools.

A small note: You should add relevant code in your question, so that it is easier to help you.

edited May 06 '18 at 18:43

answered May 06 '18 at 18:21

Thomas Darvik

748
7
22

Thanks, adding margin: 0; to all section was useful. – Ilyes Medjedoub May 06 '18 at 18:24
If I answered your question it would be great if you can mark it with the checkmark on the left side of my answer. – Thomas Darvik May 06 '18 at 18:25
@IlyesMedjedoub this doesn't really answer your question ... you need to set margin of only p to be 0 [but it's not mandatory, you can fix it with another way]. And you are having a margin collapsing issue that make the margin of p to be outside. Check the duplicate question for more information – Temani Afif May 06 '18 at 19:26
He wants to get rid of "an annoying space between two divs", and that is done by removing the `margin`. What is the problem with my answer? A different solution does not render my solution faulty? My updated answer takes into account the `margin` on the `p` element as well. – Thomas Darvik May 06 '18 at 19:30
You are more than welcome to edit my answer @TemaniAfif if you want. – Thomas Darvik May 06 '18 at 19:37
removing all the margin removes the problem, because the problem is not margin BUT margin collpasing of p element with its parent element. So the OP think it's related to margin but it's not the case. If you add for example `overflow:auto` to the section you will also get rid of this space ... Your solution is not faulty, but for me it doesn't give the correct reason of the issue, you simply provided a solution and you didn't explain the right reason by providing the box model definition – Temani Afif May 06 '18 at 19:41

Css - Getting rid of annoying space between objects

2 Answers2