设置绝对仓位和保证金

Question

我想将元素的 position 设置为 absolute 并设置 margin-bottom，但似乎 margin-bottom< /code> 没有效果。

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
}

Answer 1

我知道这不是一个非常及时的答案，但有一种方法可以解决这个问题。您可以在绝对定位的元素内添加一个“间隔”元素，该元素具有负底部边距，并且高度与负底部边距大小相同。

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 */
}

Answer 2

基于 Joey 的回答，为了获得更清晰的标记，请使用 CSS :after-选择器添加用于所需底部边距的垫片。

CSS

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

Answer 3

当您的元素位于其顶部时，您希望 margin-bottom 做什么？

如果元素没有 top 属性，则 margin-bottom 只会对绝对定位的元素执行任何操作。

Answer 4

您需要将position设置为relative才能设置其margin。

margin-bottom、margin-left 和 margin-right当元素处于位置：绝对时，将不工作。

例子：
HTML：

<img src="whatever.png"/>

CSS：

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

Answer 5

我有一个绝对位置，需要在右侧设置边距。
这是我想出的方法：

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

Answer 6

对于某些用例，将 position:absolute 更改为 position:relative 也可以解决此问题。如果你能改变一下自己的定位，这将是解决问题的最简单的方法。否则，乔伊的垫片就可以了。

Answer 7

我已经找到解决办法了！！！

设置容器的最小高度，位置需要从绝对位置更改为继承，将顶部属性设置为您选择的值，并且显示需要为内联块。

当我尝试使用绝对位置、移动具有 top 属性的元素并尝试添加边距时，这对我有用。

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

Answer 8

由于我事先不知道高度，因此我在绝对定位的末尾添加了一个不可见的元素，其高度是我想要的边距。

在我的例子中，绝对定位的元素是一个表格，所以我添加了一个额外的空行，高度为 100px。然后，本应位于表格底部的边框改为“tr:nth-last-of-type(2) td”。

希望这有帮助。

Answer 9

将其放在其他元素中并为其设置边距：

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

Answer 10

如果用padding就可以了。

尝试 :after 伪类。

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

Answer 11

您可以简单地在 Container 元素内创建一个 div 元素，为其指定相对位置并使用 Bottom 属性。

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




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