Unwanted spacing between html elements

Question

It appears as if there is padding between two of my elements - content1 and footer. I do not want this 'padding' but I cannot understand why it is there at all. Here is part of problematic html text on its own - the 'padding' still appears. I've tried adding in padding: 0 and margin: 0 to both the elements with no result.

<style type="text/css">
body{
    margin: 0;
}
.footer{
    position: relative;
    width: 100%;
    min-width: 512px;
    height: 150px;
    background-color: black;
    font-size: 12px;
    font-family: arial;
    color: gray;
    z-index: 5;
}
.content1{
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #E6E6E6;
    z-index: 5;
}
.imagecontainer{
    height: 80%;
    float: right;
}
.image{
    position: relative;
    display: block;
    height: 100%;
}
</style>
<body>
    <div class="content1">
        <!--<div class="textcontainer">
            <p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
    </div>-->
        <div class="imagecontainer">
            <img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
        </div>
    </div>

    <div class="footer">
        <center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
    </div>
</body>

In response to the proposed answer to this question. I have removed the image from the text and unfortunately the 'padding' was not removed.

score 1 · Answer 1 · answered Sep 20 '15 at 17:11

1

It seems that your paragraph tag has a margin.

Apply this css rule:

.footer p {
   margin: 0;
}

Here is a fiddle

answered Sep 20 '15 at 17:11

Kristijan Iliev

4,901
10
28
47

That worked great. Am I correct in saying that paragraphs come with a standard margin or padding? – Sep 20 '15 at 17:14
here you have a question about that http://stackoverflow.com/questions/819161/what-is-the-default-padding-and-or-margin-for-a-p-element-reset-css – Kristijan Iliev Sep 20 '15 at 17:18

score 0 · Accepted Answer · answered Sep 20 '15 at 17:12

You have encountered collapsing margins.

When elements have top or bottom margin, and the parent element doesn't have a border or padding, the margins collapes. The effect is that the margin is visible outside the parent element, not between the parent element boundaries and the child element.

It's the margin of the p element in the footer that is collapsing. It creates the distance between the content1 and the footer element.

By removing the margin on the p element, you get rid of the distance:

.footer p {
  margin: 0;
}

Demo:

.footer p {
  margin: 0;
}

body{
    margin: 0;
}
.footer{
    position: relative;
    width: 100%;
    min-width: 512px;
    height: 150px;
    background-color: black;
    font-size: 12px;
    font-family: arial;
    color: gray;
    z-index: 5;
}
.content1{
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #E6E6E6;
    z-index: 5;
}
.imagecontainer{
    height: 80%;
    float: right;
}
.image{
    position: relative;
    display: block;
    height: 100%;
}

    <div class="content1">
        <!--<div class="textcontainer">
            <p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
    </div>-->
        <div class="imagecontainer">
            <img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
        </div>
    </div>

    <div class="footer">
        <center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
    </div>

If this is a "margin collapse" problem, you should have voted to close this question as a duplicate of one of our canonical [margin collapse](http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) questions — cimmanon, Sep 20 '15 at 17:13
@cimmanon: I reopened the question because it was marked as a duplicate of a question about spacing around images. You can vote to close the question if you have a proper duplicate. — Guffa, Sep 20 '15 at 17:16
Without myself knowing about collapsing margins I could not find an answer. I have searched using 'padding' and 'margin' and looked through the SO recommended questions before posting. — , Sep 20 '15 at 17:21

score 0 · Answer 3 · answered Sep 20 '15 at 17:12

0

if you want, you can always CSS your way through it, something like

* { margin:0; padding:0; }

It should reset All elements, after that you define new paddings and margins, which is much easier ;)

answered Sep 20 '15 at 17:12

Karli Ots

729
1
8
22

score 0 · Answer 4 · answered Sep 20 '15 at 17:13

0

Your using a <center> tag if your using HTML5 it's not supported... if your not using HTML5 the <center> tag is a block element, add display: inline-block in the css.

answered Sep 20 '15 at 17:13

Jordan Davis

1,485
7
21
40

Unwanted spacing between html elements

4 Answers4