Question

我不确定如何解释这一点，但我创建了这个JSFiddle以显示问题。

＆＃13;

.news {
    float: left;
    width: 465px;
    height: 260px;
    padding: 0px 7px;
    position: relative;
}
.news .news-title {
    float: left;
    position: relative;
    z-index: 10;
    margin: 10px 20px;
    padding: 10px;
}
.news .news-title h2 {
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    background: #010101;
    font-family: 'Open Sans', sans-serif;
    padding: 10px;
    display: inline;
    word-wrap: break-word;
}
.news img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

＆＃13;

<div class="news">
    <div class="news-title"><h2>Lorem ipsum dolor sit amet, consectetur</h2></div>
    <img src="https://dl.dropboxusercontent.com/u/22433338/news_mc.jpg" alt="" />
</div>

<div class="news">
    <div class="news-title"><h2>Lorem ipsum dolor sit amet, consectetur</h2></div>
    <img src="https://dl.dropboxusercontent.com/u/22433338/gmod_news.jpg" alt="" />
</div>

＆＃13;

基本上，在第一行的最后，它不会在右侧和第二行上进行任何填充，左侧根本没有填充。

我尝试使用自动换行和空白等内容，但我似乎无法弄清楚如何解决这个问题。

Answer 1

检查出来

http://jsfiddle.net/mGQG4/18/

基本上你在h2 CSS中做了两件事

padding: 10px 0; /* change horizontal padding to 0 */
box-shadow: 10px 0 0 red, -10px 0 0 red; /* add this line */

应按要求工作。当然，也可以将颜色从红色改为＃010101。

Answer 2

这是一个更新，
检查，Updated

只需添加

box-shadow: 10px 0 0 black, -10px 0 0 black;

到 .news .news-title h2

Answer 3

您可能需要添加line-height: 3;

demo

Answer 4

您可以使用box-shadow来获得所需的结果。记得修改h2上的填充并删除那里的水平填充。

<强> CSS

.news {
    float: left;
    width: 465px;
    height: 260px;
    padding: 0px 7px;
    position: relative;
}
.news .news-title {
    float: left;
    position: relative;
    z-index: 10;
    margin: 10px 20px;
}
.news .news-title h2 {
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    background: #010101;
    font-family: 'Open Sans', sans-serif;
    padding: 10px 0 10px 0;
    display: inline;
    line-height:220%;
    word-wrap: break-word;
    box-shadow: 10px 0 0 black, -10px 0 0 black;
}
.news img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

示例

http://jsfiddle.net/mGQG4/27/

Answer 5

从＆＃34; .news .news-title h2＆＃34;移动背景。 to＆＃34; .news .news-title＆＃34; ; - ）

Answer 6

Check this fiddle

I can see padding between images and texts on those images.
line-height: 40px;

Answer 7

正如Yogesh Sharma在评论中指出的那样，问题是您的display:inline课程中有.news .news-title h2。如果删除它，它可以正常工作。

JSFiddle

Answer 8

对于HTML / markdown，您可以使用：

<mark style="background-color: yellow; color:red;">Test-Driven Development (TDD)</mark>

HTML / CSS文本自动换行背后的背景颜色

8 个答案: