CODEWITHSUNDEEP
htmlcss
GibboK
GibboK

Reputation: 73998

How to remove space between divs?

I would need remove the white space between .

I have tried with margin 0 but with no success.

Any idea how to solve it?

http://jsfiddle.net/554yz/

<!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.

Upvotes: 0

Views: 602

Answers (4)

vol7ron
vol7ron

Reputation: 42179

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.

Upvotes: 1

Pooshonk
Pooshonk

Reputation: 1324

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

Upvotes: 3

Chakravarthy S M
Chakravarthy S M

Reputation: 618

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;
          }

Upvotes: 0

AhmetEmre90
AhmetEmre90

Reputation: 501

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;
}

Upvotes: 1

Related Questions