css - CSS 链接间距和段落间距

Question

这是网站：

http://wesbos.com/tf/shutterflow/?cat=1

1. 侧面标有 S&S 摄影的横幅图片在底部添加了几个像素的边距。仅当我将其链接到 URL 时才会发生这种情况。

2. 滚动图像以查看突出显示的文本。这很好用，除了我想在行尾添加一些填充。普通的 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

您应该能够将每一行作为 <p> 来执行此操作，但是您必须在每一行的末尾添加一个额外的 <br>：

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/