0

I want to apply margin bottom on an absolutely positioned element but it doesn't work.

Here's my code Html:

<div class="container">
  <div class="absolute"></div>
  <div class="item2"></div>
</div>

Css


.container {
  position: relative;
}

.absolute {
  position: absolute;
  top: -20px;
  margin-bottom: 20px;
}

I want to create a space between the first and the second item. I thought of using a margin-top on the second item, but the height of the first item changes cos of the content inside it

Nimra Tahir
  • 391
  • 1
  • 6
Innocent Victor Mark
  • 1
  • 1
  • Does this answer your question? [Set position absolute and margin](https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin) – Golden Orange Jun 16 '23 at 16:25
  • Have you tried adding a `padding-bottom` to your container? – Julia Jun 16 '23 at 16:30
  • You can't use margin on absolute position, use `bottom:20px;` – Arman Moalemi Jun 16 '23 at 16:56
  • 1
    CSS should be lowercase and you're missing `;` at the end of every line. – j08691 Jun 16 '23 at 17:22
  • It is worth putting your code through a validator - it's full of errors as @j08691 has pointed out. Also use your browser's devtools to find out exactly what CSS is being applied. In this case though you need to understand that an absolute positioned element is taken out of the normal flow and doesn't affect other elements' positioning so a margin on it will make no difference to the following div. – A Haworth Jun 16 '23 at 19:17

1 Answers1

0

Actually it can be done through padding-bottom. Then for the item2 you can add margin-top that will probably help you resolve your issue.

Also, this might be helpful to you Guide

Nimra Tahir
  • 391
  • 1
  • 6
  • How will adding padding to an absolutely positioned element affect the positioning of any other element? – A Haworth Jun 16 '23 at 19:18
  • It will affect the size of the content in the element not directly affect the positioning of the element. – Nimra Tahir Jun 18 '23 at 08:19
  • My point was that doesn't affect the positioning of *any other* element, because the element itself is absolutely positioned. – A Haworth Jun 18 '23 at 08:28