位置前的空格：绝对元素？

Question

我有一个绝对位于其盒子底部的元素，然后盒子本身就是一系列的一部分，它们都固定在最高盒子的高度。我在如何在绝对定位的元素上面获得一些空格的消息？ JSFiddle here ...＆＃34;做这个＆＃34;最高的盒子里的按钮需要在它上面和下面的一些空间。

我正在尝试插入换行符并设置空格但这不起作用。

.myelement:before {
    content: "\00000a";
    white-space: pre;
}

提前致谢！

Answer 1

您可以为上一个li元素添加下边距，因为它们正在确定高度。

添加此css：

.providers li:last-child{
     margin-bottom:30px;   
}

当然，保证金可以是您需要的任何东西。

Fiddle

Answer 2

最简单的方法 - 为您的商品添加padding-bottom：

.ListCtr {
    padding-bottom:30px;
}

http://jsfiddle.net/zh2os8yt/4/

由于您的按钮仅包含少量文本，因此除非屏幕宽度“非常小”，否则这将起作用。如果这是一个问题，您可能希望使用媒体查询为窄屏幕使用更大的填充值。

但flexbox将是解决此问题的更好工具。

Answer 3

尝试在您的盒子中添加填充底部。例如，您可以将.ListCtr编辑为以下内容：

.ListCtr {
    position: relative;
    padding-bottom:80px;
}