与CSS反向填充

我正在一个网站上工作，我正在尝试一些新的CSS与东西。更多的“天赋”比任何东西，但我希望该网站看起来不错。 :)与CSS反向填充

alt text

在上面的图片，我要线条实际上是“中”白盒子上面写着“欢迎到莫里亚”，所以看起来好像白线来框的输入/输出/并横跨。基本上，我想要白线下几个像素。（或一切了几个像素）

这是部分的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; 
}

我试图做的只是简单地使填充元素为负数，所以它会“向上”而不是向下。但是，这根本不起作用。我以为你可以这样做，但显然不是。所以我不确定如何使段落边界向下移动。

来源

2010-12-18 Ethan Mick

试试这个：

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

来源

2010-12-18 16:55:35 crodjer

这似乎是工作！ “位置：相对;”究竟是什么做？就此而言，“顶”究竟是做什么的？ – 2010-12-18 17:08:39

'position：relative'你可以设置你的元素相对于它默认的位置。顶部：-5px;将元素从顶部向下移动5px（因此朝向它移动5px），同样也是左侧，右侧，底部。 – crodjer 2010-12-18 17:20:30

http://www.w3schools.com/Css/css_positioning.asp – crodjer 2010-12-18 17:20:59

其他风格影响这些块。

看到我的样品：http://jsfiddle.net/DFEyj/看起来像预期的那样。

另请注意，您的语法非常冗长。

来源

2010-12-18 16:59:33 Flack

我会去负上边距：

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

负填充不允许按照规范，因此必须被忽略：

与边距属性，用于填充值值不能是负面的。

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

来源

2014-09-09 01:02:38 JHoffmann

发布的解决方案crodjer建议使用相对定位将元素5px重新定位，为它下面的元素创建5px的更多空间。使用负边距可以保持间距不变。 – JHoffmann 2014-09-09 01:10:26

与CSS反向填充

回答

相关问题