使用 CSS 向下移动一段文本答案

【问题标题】：shifting a piece of text down using CSS使用 CSS 向下移动一段文本
【发布时间】：2016-03-13 21:38:35
【问题描述】：

我想将文本标签向下移动大约 6px 我正在附加样式：

.price-label{
    font-family:Arial, Helvetica, sans-serif;
    font-size:small;
    position:relative;
    bottom:-6px;
    vertical-align:bottom;
}

HTML 是：

<table border="0" cellspacing="1" cellpadding="0">
    <tr>
        <td height="45" colspan="2" align="center"><p><span class="text">Name</span><span class="name-label"></span></p></td>
        </tr>
            <tr>
                    <td>&nbsp;</td>
                    <td class="price-label">54.67</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CCCCCC">&nbsp;</td>
                    <td height="45">&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CC3300">&nbsp;</td>
                    <td height="112">&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CCCCCC">&nbsp;</td>
                    <td height="22">&nbsp;</td>
                  </tr>
                </table>

从视觉上看，我希望 54.67 标签水平平行出现 - 与灰色单元格（顶部的一个）和红色单元格（顶部的第二个）相遇的间隙。因为数字代表左边栏中的那个点。

因此，如果其他一些技术更好，请告诉我，也许我应该使用 DIV 来获得更多控制权？

【问题讨论】：

标签： html css

【解决方案1】：

如果您想将其向下移动，则需要将其移动正 6px，而不是负 6px，并设置 top 属性，而不是底部

position: relative;
top: 6px;

【讨论】：

更好的推理，但我不觉得摆弄位置是正确的方法——'当然我们实际上并不知道:)

【解决方案2】：

如果我没看错，那么您正试图跨越两个表格单元格之间的边界，这是行不通的。您需要合并右列中的前两个单元格，然后将 rowspan="2" 合并到其中包含数字的新单元格。然后顶部或底部垂直对齐单元格中的文本并添加一些 padding-top 直到它正确对齐。

【讨论】：

【解决方案3】：

Label 是一个内联元素，margin/padding 仅在您将其设为块（inline-block、block 或 float）时才有效。试试这个：

.price-label {
        padding:6px 0 0;
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }

【讨论】：

好答案。内联元素通常会忘记这一方面...+1

【解决方案4】：

你最好使用：

.price-label { margin-top: 6px; }

但是，如果没有一些关于该表格单元格周围其他内容的上下文，很难了解更多信息。

【讨论】：

【解决方案5】：

使用padding-top:6px; 代替定位，这可能会使与兄弟元素等的关系变得非常混乱。并且具有其他副作用。

【讨论】：