Remove gap between 2 divs

Question

I am using material css for a small project, specifically the cards. I have 2 cards in my page and want to remove the space between them. I thought I would be fairly trivial but cant seem to apply any css to my content. Heres my code:

<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="card-panel blue accent-3">
                    <div class="card-content">
                        <span class="card-title white-text"><i class="fa fa-bars" aria-hidden="true">
                            </i> title</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="second">
            <div class="col-md-6 col-md-offset-3">
                <div class="card-panel white blue-text">
                    <div class="card-content">
                        <ul>
                            <li><a href="#">report 1</a></li>
                            <li><a href="#">report 2</a></li>
                            <li><a href="#">report 3</a></li>
                            <li><a href="#">report 4</a></li>
                            <li><a href="#">report 5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

<style type="text/css">
    body {
        background-color: #e7e6ef;
    }
    .row {
        width: 500px;
        margin-left: 50%;
    }
    #second {
        margin-top: 0; !important;
    }
</style>

How it looks:

However I cant seem to remove the gap between the 2 cards nor center them. Any help is greatly appreciated

Try setting the `
`'s `margin` to 0. Because the default margin of `
` is 1em (top and bottom). — Cookie Ninja, Jun 24 '16 at 23:58
FYi... `margin-top: 0 !important;` <-- you had an extra semicolon in there, which is incorrect. — Scott, Jun 25 '16 at 04:34
can you clearify me that in blue section and white section space remove or other space remove — Ravi Sukhadia, Jun 25 '16 at 06:22

score 3 · Answer 1 · answered Jun 27 '16 at 07:54

3

you must set margin for .row and .card-panel :

.row{
    margin-bottom: 0px !important;
}

.card-panel {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

here is a working fiddle

answered Jun 27 '16 at 07:54

Elsiete

126
13

score 0 · Answer 2 · answered Jun 24 '16 at 23:59

0

You can add .card-panel { margin: 0; } (This class has preset margins that you need to override)

answered Jun 24 '16 at 23:59

Johannes

64,305
18
73
130

I did try it. No matter which div I select, there always exists a gap between the 2 cards. – Beginner Jun 25 '16 at 00:02
Use the browser's developer tools to check which element/s has/have margins and and `margin: 0;` to that/those. – Johannes Jun 25 '16 at 00:07

score 0 · Answer 3 · answered Jun 25 '16 at 00:08

0

Add css to your row divs Working Fiddle

.row{ 
  width:500px;
  margin:0 auto !important;
}

Also you are mixing bootstrap classes with the materialize.css classes please try to use only one plugin.

answered Jun 25 '16 at 00:08

M.Tanzil

1,987
1
12
28

score 0 · Answer 4 · answered Jun 27 '16 at 17:04

0

One thing I noticed margin-top: 0; !important; is wrong. Replace with margin-top: 0 !important;

answered Jun 27 '16 at 17:04

Nour Lababidi

414
4
7

score -1 · Answer 5 · edited Dec 29 '22 at 10:11

-1

Try this:

.container {
    display: flex;
    flex-direction: column;
}

edited Dec 29 '22 at 10:11

Eric Aya

69,473
35
181
253

answered Dec 29 '22 at 07:29

012- Deebika S

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 29 '22 at 10:21

Remove gap between 2 divs

5 Answers5