如何删除在使用 CSS 相对定位元素后出现的空白

qqXQn

关注

发信

关注(28)粉丝(399)

如何删除在使用 CSS 相对定位元素后出现的空白

本文介绍了如何删除在使用 CSS 相对定位元素后出现的空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

出现的问题如下:在使用 CSS 相对定位元素后，我得到了元素所在位置的空白......我不想要空白！

 .thetext{宽度:400px；背景:黄色；边框:1px 红色虚线；边距:50px；填充:5px；字体粗细:粗体；}.whiteblob{位置:相对；顶部:-140px；左:70px；宽度:200px；高度:50px；边框:4px纯绿色；背景:白色；字体大小:2.5em；红色;}.footerallowedwhitespaceinblue{高度:10px；背景颜色:蓝色；}.页脚{背景颜色:灰色；高度:200px；}


for(c=0;c<div class="whiteblob">&nbsp;买这个！
<div class="footerallowedwhitespaceinblue">

<div class="footer">上面的空白是大的方式！在移动时购买它仍然占用空间.

JSFiddle:http://jsfiddle.net/qqXQn/

正如您在示例中看到的，我想要的唯一空白是由 thetext 块引起的 50px 边距的空白；以及footerallowedwhitespaceinblue 的间距(设为蓝色以便可见).问题是……现在空白太大了，因为buy this"div在相对定位后仍然占用空间.

我该如何解决这个问题?

解决方案

您可以通过应用等于元素宽度或高度的负边距来解决此问题.

对于位于顶部的 100px 高度的元素，您将应用 margin-bottom:-100px;

对于位于底部的 100px 高度的元素，您将应用 margin-top:-100px;

对于位于左侧的 100px 宽度的元素，您将应用 margin-right:-100px;

对于位于右侧的 100px 宽度的元素，您将应用 margin-left:-100px;

剪切&粘贴 css 片段:

.top{位置:相对；顶部:-100px;高度:25px；底边距:-25px；}.底部{位置:相对；顶部:100 像素；高度:25px；边距顶部:-25px；}.剩下{位置:相对；左:-100px；宽度:25px；边距右:-25px；}.对{位置:相对；左:100像素；宽度:25px；左边距:-25px；}

修改后的示例代码变为:

.thetext{宽度:400px；背景:黄色；边框:1px 红色虚线；边距:50px；填充:5px；字体粗细:粗体；}.whiteblob{位置:相对；顶部:-140px；左:70px；宽度:200px；高度:50px；底边距:-50px；边框:4px纯绿色；背景:白色；字体大小:2.5em；红色;}.footerallowedwhitespaceinblue{高度:10px；背景颜色:蓝色；}.页脚{背景颜色:灰色；高度:200px；}


for(c=0;c<div class="whiteblob">&nbsp;买这个！
<div class="footerallowedwhitespaceinblue">

<div class="footer">

http://jsfiddle.net/qqXQn/1/

The problem occurs is the following:After relative positioning an element with CSS I get a white-space of where the element was... I don't want the white-space!

    .thetext
    {
        width:400px;
        background:yellow;
        border: 1px dashed red;
        margin:50px;
        padding:5px;
        font-weight:bold;
    }
    .whiteblob
    {
        position:relative;
        top:-140px;
        left:70px;
        width:200px;
        height:50px;
        border: 4px solid green;
        background:white;
        font-size:2.5em;
        color:red;

    }
    .footerallowedwhitespaceinblue
    {
        height:10px;
        background-color:blue;
    }
    .footer
    {
        background-color:grey;
        height:200px;
    }

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
    </div>
    <div class="whiteblob">
        &nbsp;buy this!
    </div>
    <div class="footerallowedwhitespaceinblue">
    </div>
    <div class="footer">
        The whitespace above is way to big! The buy this still takes up space whilst it is moved.
    </div>

JSFiddle: http://jsfiddle.net/qqXQn/

As you can see in the example, the only whitespace I want is the whitespace caused by the thetext block by the margin of 50px; and the spacing by the footerallowedwhitespaceinblue(made blue so it's visible).The problem is... the whitespace is too big now because the "buy this" div still takes up space after it's been relatively positioned.

How do I solve this?

解决方案

You can simply solve this by applying a negative margin that equals the width or height of the element.

For an element of 100px height that is positioned to the top you will apply margin-bottom:-100px;

For an element of 100px height that is positioned to the bottom you will apply margin-top:-100px;

For an element of 100px width that is positioned to the left you will apply margin-right:-100px;

For an element of 100px width that is positioned to the right you will apply margin-left:-100px;

cut & paste css snippets:

.top
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

And the reworked example code becomes then:

.thetext
{
    width:400px;
    background:yellow;
    border: 1px dashed red;
    margin:50px;
    padding:5px;
    font-weight:bold;
}
.whiteblob
{
    position:relative;
    top:-140px;
    left:70px;
    width:200px;
    height:50px;
    margin-bottom:-50px;
    border: 4px solid green;
    background:white;
    font-size:2.5em;
    color:red;

}
.footerallowedwhitespaceinblue
{
    height:10px;
    background-color:blue;
}
.footer
{
    background-color:grey;
    height:200px;
}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
</div>
<div class="whiteblob">
    &nbsp;buy this!
</div>
<div class="footerallowedwhitespaceinblue">
</div>
<div class="footer">
</div>

http://jsfiddle.net/qqXQn/1/

这篇关于如何删除在使用 CSS 相对定位元素后出现的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

09-06 20:53