收录日期:2019/06/20 13:36:13 时间:2010-06-22 20:34:29 标签:css,css3,html

This is my code:

<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>

This is what it currently looks like:

http://i48.tinypic.com/2dqvo1i.png

Is there a way to add padding to the sides of the highlighted text? Regular padding on the SPAN doesn't work, because it only takes into account the the beginning and end of the sentence, not every line separately.

Any ideas? CSS3 code is fine.

After struggling for some time I found a non-quirky solution with a decent fallback for older browsers – adding two CSS3-shadows to the lines of text:

span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}
white-space: pre-wrap;

Not really a solution, but does add some space before the break.

Just pad the "p" tags that surround the spans. The "p" tag (unlike span) is a block-level element, so padding on the top, bottom, or sides will work as expected.

Try inline-block. It won't work in anything older than IE8 (though there are some work arounds), but everything else popular should be fine:

p span {
    display: inline-block;
    padding: 0 2em;
}

Finally found a way out this misery. Worked for me. Use a button on the left like this.

<p>
<button class="blankspace">
</button>
<span>
</span>
</p>

and css it like

.blankspace {
    background: none;
    opacity: 0.0;
    outline:0;
    text-decoration: none;
    width: 2%;
    height: 80%;
    margin:0 auto;
    float:left;
    text-align:right;
    padding:0%;
    font-size:2px;
}

Instead of adding two CSS3-shadows as suggested, here is a much simpler answer:

use display:block

<span> is display:inline by default, so the borders and padding you added aren't actually affecting it's size. So only the first line is affected.

Use display:block on the span and <span> now works like <p> and <div>.

Here's a good explanation: http://quirksmode.org/css/css2/display.html