Question

因此，我正在尝试构建新的registration page on my site。盒子是全部1张图片，上面放有文字和表格。

我想根据内容改变高度（不拉伸图像。因此，我切掉了盒子的顶部/底部，中间的一小部分并强迫其重复。这几乎完美地实现了< / p>

现在，问题.... box和.boxbottom之间有一个小缝隙，但我根本看不出它的来源是什么？

margin: auto;在所有div上

float: left;有所帮助，但它们并没有完全对齐

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

这是HTML：


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

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

就像.boxtop和.box紧密贴合在一起一样，我希望.box和.boxbottom能够做到相同

Answer 1

registration page上出现间隙的原因是由于margin-block-end: 1em; css被添加到form元素中。因此，要解决此问题，只需将带有CSS margin-block-end: 0;的类添加到form标签中。

Answer 2

窗体页边距将div在底部分开。为了快速解决，您可以在表单margin-bottom: 0;

上放置此样式

Answer 3

添加margin 0您的form标签

.contentbox form{
  margin:0;
}

为什么这两个div之间有差距？

3 个答案: