Question

这是网站：

在S＆amp; S摄影一侧的横幅图像会在底部添加几个像素的边距。这只有在我将其链接到URL时才会发生。
翻转图片以查看突出显示的文字。这很好用，除了我想在行的末尾添加一些填充。普通CSS填充仅将其应用于P标记的开头和结尾。我的代码需要格式化如下:(除非有人知道如何使用每一行作为段落标记来欺骗这种效果

很抱歉格式化，编辑不会因为某种原因让我把代码放在多行上。

    <p>hey hows it going<br/> this one is<br/> short and this one is longer<br/> will this text<br/> </p>

.cover p {
    display: inline;
   color: #000;
   background-color: #fff;
   padding:5px;
}

Answer 1

侧边栏：

将图像设置为display:block;以删除额外空间。由于你的其他风格，你还必须在图像中添加clear:both;或者在顶部ul上删除浮动（它正在做的就是清除浮动的li ，您可以使用overflow:hidden;替代）。

对于悬停文字：

您必须使用单独的段落来获取填充，但这在WP中很容易实现。如果使用float而不是display：

，则每个末尾都不需要额外的<br />

 .cover p {
    float: left; /* so they don't fill the full width */
    clear: both; /* so they don't float next to each other */
    color: #000;
    background-color: #fff;
    padding:5px;
 }

当然，我会将display: inline;留在你漂浮的任何地方。它负责IE5 / 6加倍浮动边缘错误。但这是一个不同的问题。

Answer 2

要摆脱横幅图片底部的额外空间，请使用：

#sidebar a img {vertical-align:bottom;}

图像默认垂直对齐是基线，为文本下延留出空间。

Answer 3

您需要在元素中包装每一行。跨度将是一个不错的选择：

<p><span>hey hows it going</span><br /><span>this one is</span>...

然后，您可以将填充添加到span元素中。

.cover p {
   display: inline;
   color: #000;
   background-color: #fff;
}

.cover span {
   padding:5px;
}

Answer 4

你应该能够将每一行作为＆lt; p＆gt;，但你必须添加额外的＆lt; br＆gt;在每一个结束时：

HTML：

<h3>Nature Orange</h3>
<p>hey hows it going<br /></p>
<p>this one is<br /></p>
<p>short and this one is longer<br /></p>
<p>will this text<br /></p>
<p>do what I<br /></p>
<p>Want?</p>

CSS：

.cover p{  
    display:inline;
    color: #000;
    background-color: #fff;
    margin:0;
    padding:0 5px;
    line-height:1;
    }

我在这里上传了一个演示：http://demo.raleighbuckner.com/so/1303628/

CSS链接间距和段落间距

4 个答案: