繁体   English   中英

如何使用CSS将元素转换为给定的填充

[英]How to take an element over to given padding with CSS

在下图中。 我已经给容器10px填充,因为大多数时候我需要填充。 只有标题(蓝色)我不需要填充。 如何扩展标题超过填充?

http://i.stack.imgur.com/DeSHZ.jpg

我不想为容器内的每个元素提供单独的填充。

在此输入图像描述

标题上的负边距。

请参阅jsFiddle: http//jsfiddle.net/f2cdJ/

CSS

div {
  background: red;  
  padding:10px;
  width:200px; 
}
p {
  background: green;   
}
h2 {
  margin: 0 -10px;   
  background: blue;
}

HTML

<div>
    <p>This is the paragraph. This is the paragraph.</p>
    <h2>This is a heading</h2>    
    <p>This is the paragraph. This is the paragraph.</p>
    <h2>This is a heading</h2>
    <p>This is the paragraph. This is the paragraph.</p>
</div>

使用与jessegavin相同的代码。 我使用相对和绝对定位

看到它的jsfiddle 这里

CSS

div {
 background: red;  
 padding:10px;
 width:200px;
 position:relative;
}
p {
 background: green;   
}
h2 {
 background: blue;
 position:absolute;
 left:0;
 width:100%;
}

HTML

<div>
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p>
    <h2>This is a heading</h2>    
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p>
    <h2>This is a heading</h2>
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p>
</div>

正如杰塞加文所说,使用负边际。

负边距很时髦,但它们可以正常工作。 你必须将10px填充包括两次(左边一次,右边填充另一次)到标题的width ,然后做一个负margin-left

margin-left: -10px;

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM