如何删除在使用CSS相对定位元素后出现的空格 [英] How to remove whitespace that appears after relative positioning an element with CSS

问题描述

我一直在寻找这个问题的广泛，最终找到解决方案在一些晦涩的论坛上google的第10页。解决方案是在回答

出现的问题是以下：
相对定位一个元素与CSS后，我得到一个空格的元素的地方..

  .thetext {width：400px ;背景：黄色; border：1px broken red; margin：50px; padding：5px; font-weight：bold; } .whiteblob {position：relative; top：-140px; left：70px; width：200px; height：50px; border：4px solid green;背景：白色; font-size：2.5em;红色; } .footerallowedwhitespaceinblue {height：10px; background-color：blue; } .footer {background-color：gray; 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;买这个！ < / div> < div class =footerallowedwhitespaceinblue> < / div> < div class =footer>上面的空格是大的！购买这仍然占用空间，而它被移动。 < / div>  

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

如您所见例子中，我想要的唯一的空格是由空格引起的文本块边距50px;和间距由footerallowedwhitespace蓝色（使蓝色，所以它是可见的）。
问题是...空格太大现在因为买这个div仍然占据空间后，它已经相对定位。

如何我解决这个问题？

解决方案

你可以通过应用一个等于元素的宽度或高度的负边距来简单解决这个问题。 / p>

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

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

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

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

cut&粘贴css片段：

  .top 
 {
 postion： 
 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; 
} 
  

然后重做的示例代码变为：

  .thetext {width：400px;背景：黄色; border：1px broken 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;背景：白色; font-size：2.5em;红色; } .footerallowedwhitespaceinblue {height：10px; background-color：blue;}。footer {background-color：gray; height：200px;}  

 < div class = >< 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>  / pre> 

http： //jsfiddle.net/qqXQn/1/

I've been looking far and wide for this problem and finally found the solution on some obscure forum on page #10 of google. The solution is in the answer

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

    .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相对定位元素后出现的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！