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

要消除横幅图像底部的额外空间，请使用：

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

图像默认垂直对齐方式是基线，为文本下降部分留出空间。

Answer 2

对于侧边栏：

将图像设置为 display:block; 以删除多余的空间。由于您的其他样式，您还必须向图像添加 clear:both; 或删除顶部 ul 上的浮动（它所做的只是清除浮动的 li，您可以使用 overflow:hidden; 来代替）。

对于悬停文本：

您必须使用单独的段落来进行填充，但这在 WP 中很容易做到。如果您使用 float 而不是 display，则不需要在每个末尾添加额外的
：

 .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 3

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

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

然后您可以将填充添加到跨度元素。

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

.cover span {
   padding:5px;
}

Answer 4

您应该能够在每行都是

的情况下执行此操作，但您必须添加额外的
在每个末尾：

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/