Cómo eliminar los espacios en blanco que aparecen después del posicionamiento relativo de un elemento con CSS

Solución:

Simplemente puede resolver esto aplicando un margen negativo que sea igual al ancho o alto del elemento.

Para un elemento de 100px de altura que se coloca en la parte superior, aplicará margin-bottom: -100px;

Para un elemento de 100px de altura que se coloca en la parte inferior, aplicará margin-top: -100px;

Para un elemento de 100px de ancho que se coloca a la izquierda, aplicará margin-right: -100px;

Para un elemento de 100px de ancho que se coloca a la derecha, aplicará margin-left: -100px;

cortar y pegar fragmentos de CSS:

.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;
    }

Y el código de ejemplo reelaborado se convierte entonces en:

.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/

Aquí hay un ejemplo. En este caso, el objeto se movió hacia la derecha y luego hacia arriba usando un valor superior negativo. Eliminar su espacio de margen final requirió agregar un valor de margen negativo igual.

 position:relative;
 width:310px;
 height:260px;
 top:-332px;
 margin-bottom:-332px;
 left:538px;

Puede resolver este problema dando float: left antes de position: relativas. Utilice las propiedades margin-left, margin-top en lugar de top, left también.

---

---

Utiliza Nuestro Buscador