CODEWITHSUNDEEP
csspositionmargin
kirby
kirby

Reputation: 4041

Set position absolute and margin

I would like to set an element's position to absolute and have a margin-bottom, but it seems that the margin-bottom doesn't have an effect.

HTML:

<div id='container'></div>

CSS:

#container {
  border: 1px solid red;
  position: absolute; 
  top: 0px;
  right: 0px;
  width: 300px;
  margin-bottom: 50px; // this line isn't working
}

Upvotes: 56

Views: 144812

Answers (11)

Abdul rehman
Abdul rehman

Reputation: 1

You can simply create a div element inside the Container element, give it a position relative and use the bottom property.

<div id="container">
    <div class="spacer"></div>
</div>




.spacer{
position: relative;
bottom: 2px;
}

Upvotes: 0

junho
junho

Reputation: 3841

If it's okay to use padding.

Try :after pseudo class.

#parent {
  padding-bottom: 10px;
  background: gray;
  width: 300px;
  height: 100px;
}

#child {
  position: relative;
  width: 100%;
  height: 100%;
}

#child:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: yellow;
}
<div id='parent'>
  <div id='child'></div>
</div>

Upvotes: 0

Bambier
Bambier

Reputation: 846

Put it in other element and set margin to that:

.nav-item {
  margin: 0;
  margin-right: 10px;
  margin-left: 10px;
  display: inline;
  padding: 0 20px;
}

.nav-link {
  position: absolute;
  color: #000;
  transition: all 0.5s ease;
  text-decoration: none;

}

.nav-link:hover {
  color: #14aae6;
  transform: translateY(-.35em) scale(1.1);
}
<ul>
  <li class="nav-item">
    <a class="nav-link" href="#"> Item 1 </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"> Item 2 </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"> Item 3 </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"> Item 4 </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"> Item 5 </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"> Item 6 </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"> Item 7 </a>
  </li>
</ul>

Upvotes: 0

morteza
morteza

Reputation: 738

I have an absolute position and need to set a margin in right side. here the way i come up with:

position:absolute;
  top:0px;
  left:10px;  
  width: calc(99% - 10px);
  height:80%;

Upvotes: 4

Dovev Hefetz
Dovev Hefetz

Reputation: 1456

Since I don't know the height in advance, I instead added an invisible element at the end of the absolutely positioned with a height that I wanted the margin to be.

In my case, the absolutely positioned element is a table, so I added an extra empty row with a height of 100px. Then the border that was supposed to be at the bottom of the table went on "tr:nth-last-of-type(2) td" instead.

Hope this helps.

Upvotes: 0

Tom McDonough
Tom McDonough

Reputation: 1262

I have found the solution!!!

set a min-height of the container, the position will need to be changed from absolute to inherit, set the top property to a value of your choice and the display will need to be inline-block.

This worked for me when I tried using position absolute, moving the element with top property and try to add a margin.

min-height: 42px;
display: inline-block;
top: 6px;
position: inherit;

Upvotes: 0

Notlaw
Notlaw

Reputation: 89

You need to set the position to relative in order to set its margin.

The margin-bottom, margin-left and margin-right will NOT work when the element is in position: absolute.

Example: HTML:

<img src="whatever.png"/>

CSS:

img {
   position: relative;
   margin: 0 auto;
}

Upvotes: 6

nik
nik

Reputation: 583

Building upon Joey's answer, for a cleaner markup, use the CSS :after-selector to add a spacer for the desired bottom margin.

CSS

#container:after {
    position: absolute;
    content: "";
    bottom: -40px;
    height: 40px;
    width: 1px;
}

Upvotes: 40

Liglo App
Liglo App

Reputation: 3819

For some use cases, changing position: absolute to position: relative solves this problem as well. If you can change your positioning, it will be the simplest way to solve the problem. Otherwise, the spacer of Joey does the trick.

Upvotes: 0

Joey
Joey

Reputation: 653

I know this isn't a very timely answer but there is a way to solve this. You could add a "spacer" element inside the element positioned absolutely with a negative bottom margin and a height that is the same size as the negative bottom margin.

HTML:

<div id="container">
    <div class="spacer"></div>
</div>

CSS:

// same container code, but you should remove the margin-bottom as it has no effect

// spacer code, made it a class as you may need to use it often
.spacer {
    height: 50px;
    margin: 0 0 -50px 0;
    /* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
    background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}

Upvotes: 63

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

What are you expecting margin-bottom to do when your element is positioned by its top side?

margin-bottom will only do anything to an absolutely-positioned element if the element has no top property.

Upvotes: 29

Related Questions