CSS 链接间距和段落间距答案

【问题标题】：CSS link Spacing and Paragraph SpacingCSS 链接间距和段落间距
【发布时间】：2009-08-21 19:39:31
【问题描述】：

这里是网站：

标有 S&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;
}

【问题讨论】：

标签： css padding margin

【解决方案1】：

要消除横幅图片底部的多余空间，请使用：

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

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

【讨论】：

【解决方案2】：

对于侧边栏：

将您的图像设置为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 双倍浮动边距错误。但这是一个不同的问题。

【讨论】：

【解决方案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;
}

【讨论】：

嗯，我正在使用 wordpress 输出。有没有办法自动做到这一点？

【解决方案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/

【讨论】：

如果您将 CSS 更改为浮动和清除，则不需要额外的
标签。查看我的回复。