带填充的块之前的 CSS 内容

发布于 2024-11-15 12:21:09 字数 760 浏览 1 评论 0原文

是否可能/如何：

在使用 CSS 内容/选择器/属性之前删除填充？

例如，给定以下代码，如何使底部段落看起来像顶部（content:before 之间没有空格）但保留段落上的填充。

HTML5：

<div class="no-padding">
    <p>Paragraph</p>
</div>

<div class="padding">
    <p>Paragraph</p>
</div>

CSS3：

p {
    outline: 3px solid #fbb;
    outline-top: 2px solid #fbb;
    margin-bottom: 15px;
}
p:before {
    content: 'Paragraph';
    border: 1px solid #fbb;
    background-color: #fbb;
    display: block;
}

.padding p {
    padding: 10px;
}

(这仅适用于最新和最好的浏览器，因此首选 HTML5 和 CSS3/LESS）

原文

Is it possible/how do I:

Remove the padding when using a CSS content/before selector/property?

E.g. given the follow code, how can I make the bottom paragraph look like the top on (with no white space between the content:before) but retain the padding on the paragraph.

Code: http://jsfiddle.net/569Ed/2/

HTML5:

<div class="no-padding">
    <p>Paragraph</p>
</div>

<div class="padding">
    <p>Paragraph</p>
</div>

CSS3:

p {
    outline: 3px solid #fbb;
    outline-top: 2px solid #fbb;
    margin-bottom: 15px;
}
p:before {
    content: 'Paragraph';
    border: 1px solid #fbb;
    background-color: #fbb;
    display: block;
}

.padding p {
    padding: 10px;
}

(this is only for the lastest and greatest browsers only, so HTML5 and CSS3/LESS is preferred)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仲春光 2024-11-22 12:21:09

我认为你可以这样做，

代码： http://jsfiddle.net/yuliantoadi/569Ed/4 /

p {
    outline: 3px solid #fbb;
    outline-top: 2px solid #fbb;
    margin-bottom: 15px;
}
.padding p {
    padding: 10px;
}
p:before {
    content: 'Paragraph';
    border: 1px solid #fbb;
    background-color: #fbb;
    display: block;
}
.padding p:before {
    margin:-10px -10px 0 -10px;
}

是你的意思吗？

i think you can do it this way,

code : http://jsfiddle.net/yuliantoadi/569Ed/4/

p {
    outline: 3px solid #fbb;
    outline-top: 2px solid #fbb;
    margin-bottom: 15px;
}
.padding p {
    padding: 10px;
}
p:before {
    content: 'Paragraph';
    border: 1px solid #fbb;
    background-color: #fbb;
    display: block;
}
.padding p:before {
    margin:-10px -10px 0 -10px;
}

is that what you mean?

回复收藏 0 原文

~没有更多了~