How to remove space between divs?

Question

I would need remove the white space between .

I have tried with margin 0 but with no success.

Any idea how to solve it?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: transparent;
            width: 1280px;
            height: 720px;
        }

        #content {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 1280px;
            height: 720px;
            outline: 1px solid red;
        }

        ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }

        #bar-header, #bar-footer {
            position: fixed;
            left: 0px;
            width: 1280px;
            height: 30px;
            background-color: darkgray;
        }
        #bar-header {
            top: 0px;
        }

        #bar-footer {
            top: 690px;
        }
        .content-section {
            background-color: lightgray;
            outline: 1px solid black;
            height: 300px;
        }

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        function start() {
        };
    </script>
</head>
<body onclick="start();">
    <div id="page">
        <div id="bar-header">Header</div>
        <div id="content">
            <div class="content-section">
                <h2>Content 1</h2>
                <a name="section-1"></a>
            </div>
            <div class="content-section">
                <h2>Content 2</h2>
                <a name="section-2"></a>
            </div>
            <div class="content-section">
                <h2>Content 2</h2>
                <a name="section-2"></a>
            </div>
            <div class="content-section">
                <h2>Content 4</h2>
                <a name="section-2"></a>
            </div>
        </div>
        <div id="bar-footer">Footer</div>
    </div>
</body>
</html>

EDIT:

I have tried also

.content-section { background-color: lightgray; outline: 1px solid black; height: 300px; margin-bottom: -20px; }

it works, but I rather choose an alternative solution.

Duplicate of: http://stackoverflow.com/questions/18508442/remove-whitespace-between-div-element — Casey Falk, Jul 24 '14 at 11:47
You have some issues, try making the window smaller and see what happens to the scrollbar — adeneo, Jul 24 '14 at 11:49

Pooshonk · Answer 1 · 2014-07-24T12:05:23.277

3

Add styling to your h2 tags inside of the content-section div

.content-section h2 {
    margin-top: 0px;
}

.content-section:first-of-type h2 {
    margin-top: 27px;
}

JSfiddle

edited Jul 24 '14 at 12:05

answered Jul 24 '14 at 11:48

Pooshonk

1,284
2
22
49

For me that messes up the header/footer alignment – vol7ron Jul 24 '14 at 11:51
Try my update, the header seems fine but I don't know about the footer. – Pooshonk Jul 24 '14 at 12:05
Think it's an iPad issue. Even the selected answer has a similar problem. – vol7ron Jul 27 '14 at 13:30

score 1 · Accepted Answer · answered Jul 24 '14 at 11:50

try Reset CSS

demo

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

score 1 · Answer 3 · answered Aug 03 '14 at 16:14

You may want to remove the margin of the h2. The easiest way to do this is by removing the block nature of the element by making it inline.

h2 { display:inline-block; }

Another thing you may not need is the fixed positioning of your elements. By keeping your content a static height, you can use the stacking of the block elements to control the positioning. All you need to do is to manage the overflow to hide the content that extends beyond its bounding block. This may or may not be what you're after, but see the changes below.

score 0 · Answer 4 · answered Jul 24 '14 at 11:51

0

Use Vertical-align:top; for content-section class in your css

         .content-section {
             background-color: lightgray;
             outline: 1px solid black;
             height: 300px;
             vertical-align:top;
          }

answered Jul 24 '14 at 11:51

Chakravarthy S M

608
6
15

How to remove space between divs?

4 Answers4