Materialize: Gap between 2 <div> ?

[iqbalaqaba]

I'm working at my website project and there's a gap ( or whitespace ? ) between 2 divs.
I already take a look at my code and i'm still confused how did this can be happening.

Could someone help me with this ? Any help appreciated, thanks 👍

[kmmbvnr]

Could you please provide a codepen that reproduce the problem?

[iqbalaqaba]

You could go to my respository and check my code here
Thanks 😀

[lpq66]

Try
'* {
margin: 0;
padding: 0;
}'

[ianarsenault]

This is me _guessing_, but If that div above "Tentag section" is using class row the space is most likely due to the margin-bottom: 15px which is set to the class .row . You can be easily override it by creating a class .className { margin-bottom: 0!important; } and setting it to the div <div class="row className">.

However, it's hard to tell what the problem is without seeing it live/the code. Try right clicking the white space and click inspect element you should see whats giving you the that space by hovering over the div.

If not, like @kmmbvnr said. Make a codepen of the problem.

[iqbalaqaba]

@kmmbvnr , sorry for making you dissapointed. here's the codepen
@lpq66 Thanks for the suggestion! I Already tried it and still, there's a gap between them
@GorgonsMaze, i dont use row class, could you check my code ? codepen

[ianarsenault]

@iqbalaqaba The problem is your .jumbotron class has a margin-bottom: 30px;

.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;    /* Here */
    color: inherit;
    background-color: #eee;
}

Just get rid of it, and that will get rid of the space.

[acburst]

Just override the css. BTW the margin bottom is on a bootstrap class and we don't recommend using both css frameworks together.

[iqbalaqaba]

@GorgonsMaze Thanks a lot !! it's worked now.
@acburst thanks 😀

[BlakeBurnette]

Anyone that comes across this. I have found that when using materialize:

Inspecting the elements you will so no padding or margin on the element in question. The containing elements do not seem to overflow, but they still do.
However, using margin inside of the element with a gap can cause this behavior.
For instance I had:

<div id="top" style="margin-bottom:0 !important">
  <form style="margin-bottom:20px"></form>
</div>
<div id="bottom" style="margin-top:0 !important">
  <h4 style="margin-top:20px">Foo title</h4>
</div>

So I had a 40 px margin between the two divs and could not for the lift of me figure it out (for five minutes).

So if you come across this, check your containing divs (near the edges)