首页 >web前端 >css教程 >如何在具有背景颜色的 span 元素内每行文本的开头和结尾添加填充?

如何在具有背景颜色的 span 元素内每行文本的开头和结尾添加填充?

Linda Hamilton
Linda Hamilton原创
2024-11-07 08:56:02314浏览

How to add padding to the beginning and end of each line of text within a span element with a background color?

填充文本行

问题:

如何在每行文本的开头和结尾添加填充在具有背景颜色的 span 元素内?

答案:

CSS 解决方案:

此解决方案需要使用内联块和仔细定位:

div { 
    line-height: 1.1; 
    padding: 1px 0;
    border-left: 30px solid #000; 
    display: inline-block; 
}
h3 { 
    background-color: #000; 
    color: #fff; 
    display: inline; 
    margin: 0; 
    padding: 0
} 
h3 .indent { 
    position: relative; 
    left: -15px;
}
h3 .subhead {
    padding: 0 15px;
    float: left;
    margin: 3px 0 0 -29px;
    outline: 1px solid #00a3d0;
    line-height: 1.15
}

HTML 标记:

<div>

以上是如何在具有背景颜色的 span 元素内每行文本的开头和结尾添加填充?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn