Why is there a gap between these two divs?

Question

So I'm trying to build a new registration page on my site. The box was all 1 image with text and forms put on it.

I want to make the height change depending on the content (without stretching the image. So I cut off the top/bottom parts of the box, a small bit of the middle and forced it to repeat. This works almost perfectly

Now, the problem...There is a small gap inbetween .box and .boxbottom but I can't see where it would come from at all?

margin: auto; on all divs

float: left; helps a little bit but they weren't perfectly aligned

Here are the divs


.boxwrapper{
    width: 530px; 
    margin: auto;
    position: relative;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
            .boxtop{
                background-image: url(images/boxrepeattop.png); 
                background-repeat: no-repeat;
                margin: auto;
                width: 100%;
                height: 45px;
            }

            .box{
                background-image: url(images/boxrepeat.png); 
                margin: auto;
                width: 100%;
                height: auto;
            }

            .boxbottom{
                background-image: url(images/boxrepeatbottom.png); 
                background-repeat: no-repeat;
                margin: auto;
                width: 100%;
                height: 45px;
            }

and here's the HTML:


<div class="boxwrapper">
<div class="boxtop">
</div>
        <div class="box"> 
            <div class="contentbox">
</div>

</div
<div class="boxbottom">
</div>
</div>

Just like .boxtop and .box fit snuggly together, I'd like .box and .boxbottom to do the same

Are you missing a little of your code? I can't see a ```.boxbottom``` in your html? — coops, Feb 05 '19 at 13:19
@Ben Please put your code inside the code snippet. So that it will become easy to reproduce the issue and provide the solution. — xoxo, Feb 05 '19 at 13:19

score 3 · Answer 1 · answered Feb 05 '19 at 13:21

3

The gap appearing on your registration page is due to the margin-block-end: 1em; css which is being added to form element. So to fix this just add a class with css margin-block-end: 0; to form tag.

answered Feb 05 '19 at 13:21

Nik

1,589
2
15
23

score 1 · Answer 2 · answered Feb 05 '19 at 13:20

1

The form margin is pushing the divs apart at the bottom. For a quick fix, you can put this style on your form margin-bottom: 0;

answered Feb 05 '19 at 13:20

Doug F

894
2
13
18

score 1 · Answer 3 · answered Feb 05 '19 at 13:21

1

Add margin 0 your form tag

.contentbox form{
  margin:0;
}

answered Feb 05 '19 at 13:21

Lalji Tadhani

14,041
3
23
40

Why is there a gap between these two divs?

3 Answers3