使用 CSS 反向填充

Posted 2023-03-06

【中文标题】使用 CSS 反向填充

【英文标题】：Reverse padding with CSS

【发布时间】：2011-05-27 14:44:21

【问题描述】：

我正在开发一个网站，并且正在尝试一些使用 CSS 的新东西。 “天赋”比什么都重要，但我希望网站看起来不错。 :)

在上图中，我希望这条线实际上位于“欢迎来到莫里亚”的白框“内”，这样看起来白线就好像从框里/出来/延伸出来并延伸。基本上，我希望白线向下几个像素。 （或其他一切都高出几个像素。）

这是该部分的 html：

<div class = "paragraphSection">
    <span class="textHeading">Welcome to Moria</span><span class="mainBodyText">
    Moria is a Minecraft server, which we have evolved into fun place to 
    build, talk, and fight. Everyone is welcome to join us play!  Of course, you should probably 
    read this page to understand what is happening, because it's a little more then 
    just Minecraft.</span>
    </div>

这是我尝试使用的 CSS：

.paragraphSection 
    border-top-style:solid;
    border-top-width:1px;
    border-color:white;
    padding-top:0px;



.textHeading 
    font-size:2em;
    padding-left:3px;
    padding-right:3px;
    background-color:white;
    padding:-10px;

    -moz-border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;

我尝试做的只是将填充元素设为负数，因此它会“向上”而不是向下。然而，这根本不起作用。我以为你可以做到这一点，但显然不能。所以我不确定如何让paragraphSection的边框下移。

【参考方案1】：

试试这个：

.textHeading
  position:relative;
  top:-5px; //Adjust it according to what looks good to you.
  .
  .

【讨论】：

这似乎有效！ “位置：相对；”到底是什么意思？做？就此而言，“top”究竟是做什么的？

使用position:relative 你可以设置你的元素相对于默认位置的位置。顶部：-5px；将元素从顶部移开 -5px（因此向其移动 5px），同样向左、向右、底部工作。

【参考方案2】：

其他样式会影响这些块。

查看我的示例：http://jsfiddle.net/DFEyj/ 看起来符合预期。

还要注意，你的语法非常冗长。

【参考方案3】：

我会选择负上边距：

.textHeading 
  margin-top: -5px;
  ...

根据规范不允许使用负填充，因此必须忽略：

与边距属性不同，填充值的值不能为负数。

来源：CSS 2.1 Specification: 8.4 Box model: Padding properties

【讨论】：

crodjer 发布的解决方案建议使用相对定位将元素重新定位向上 5px，从而为它下方的元素创建 5px 更多空间。使用负边距使间距保持不变。