![](/img/trans.png)
[英]html/css, how to make element padding not cover over previous elements?
[英]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.