How to Remove Whitespace That Appears After Relative Positioning an Element with CSS

position:relative leaves an empty space

Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

I played around with the layout a bit, and I suggest that you change these three rules to:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

How to remove whitespace that appears after relative positioning an element with CSS

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">

     buy this!

</div>

<div class="footerallowedwhitespaceinblue">

</div>

<div class="footer">

</div>

How do I remove white space due to position relative of CSS?

This is a good time to use flexbox. Have a look.

#wrapper {

  display: flex;

  border: 1px solid black;

  width: 65%;

  min-width: 720px;

  margin: 0 auto;

}

#imageStyle {

  margin: 10px 60px;

}

#featuresStyle {

  margin: 10px 0;

  flex: 1;

}

#featuresStyle h2:first-child {

  margin-top: 0;

}

/* Just to show it working */

#wrapper {

  background: navy;

}

#featuresStyle {

  background: lime;

}

#imageStyle {

  background: tomato;

}

<div id="wrapper">

  <div id="imageStyle">

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXMyE-1O_Be_qDQa7YwQGW8DLhNEeNVlOXgKj9BMGdKVsRbSdoYw" />

  </div>

  <div id="featuresStyle">

    <h2>Name: Ibanez M8M</h2>

    <br/>

    <h2>Price: $30000</h2>

    <br/>

    <h2>Description: Good Guitar!</h2>

    <br/>

    <h2>Neck Type: Bla Bla Bla</h2>

    <br/>

    <h2>Body: Bla Bla Bla</h2>

    <br/>

    <h2>Fretboard: Bla Bla Bla</h2>

    <br/>

    <h2>Bridge: Bla Bla Bla</h2>

    <br/>

    <h2>Neck Pickup: Bla Bla Bla</h2>

    <br/>

    <h2>Bridge Pickup: Bla Bla Bla</h2>

    <br/>

    <h2>Hardware Color: Bla Bla Bla</h2>

    <br/>

  </div>

</div>

Removing White-space after using top tag in CSS

Change in #bottombanner top to margin-top.

#bottombanner{
      background-color: rgb( 22, 47, 66 );
      left: 0px;
      width: 100%;
      height: 60px;
      margin-top: -31px;/*this*/
      z-index: 1;
      position: relative;
}

How to remove extra space due to padding or top properties

Change top: -100px with margin-top: -100px so the height of the parent element will be properly calculated.

In fact if you move an element with top (or left/right/bottom) and with a relative position this won't affect or recalculate the surrounding space of its parent container (which will be calculated as the element was in static position).

Css position absolute leaves white space at the top

It is shifted from the top, because it is relative to its parent .header-wrapper, that has a top margin. In order to get the desired result, you have to remove position: relative from its parent, therefore it will be relative to the viewport and will be placed at the top.

Edit: I realised, that he margin is actually applied to the child of the wrapper, causing margin collapsing. In order to fix this, you need apply overflow: auto to the parent element. By doing that, you can still have a position: relative on the wrapper, as it is not pushed down by the child. Take a look at the demo:

/* header block */

header {

    height: 536px;

    background-color: #ddd;

    background-position: center;

    background-size: 100% 536px;

    background-repeat: no-repeat;

    overflow: hidden;

}

header .header-wrapper {

    position: relative;

    overflow: auto;

    z-index: 2;

}

.header-slogan-1 {

    font-size: 32px;

    font-weight: 700;

    font-style: italic;

    margin-top: 88px;

}

.header-wrapper .header-info {

    position: absolute;

    top: 0;

    z-index: 3;

    background-color: #4caf50;

    max-width: 600px;

    padding: 25px 25px 25px 75px;

    color: #fff;

}

.text-center {

  text-align: center;

}

<header>

   <div class="header-wrapper">

      <div class="header-slogan-1 text-center">Base info</div>

       

       

   <div class="header-info">Info</div>

   </div>

</header>

Relatively position an element without it taking up space in document flow

What you're trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that:

<div style="position: relative; width: 0; height: 0">
    <div style="position: absolute; left: 100px; top: 100px">
        Hi there, I'm 100px offset from where I ought to be, from the top and left.
    </div>
</div>

How to get rid of white space below image with absolute positioned overlay div

By default, an image is rendered inline, like a letter.

You can adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or change the display so it isn't inline.

---

Related Topics