Смещение фрагмента текста с помощью CSS

Я хочу сместить текстовую метку вниз примерно на 6 пикселей. Я прикрепляю стиль:

.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 отображалась горизонтально параллельно - к зазору, где встречаются серая ячейка (верхняя) и красная ячейка (вторая сверху). Поскольку число представляет эту точку в столбце слева.

Итак, если какой-нибудь другой technqiue лучше, пожалуйста, дайте мне знать, возможно, я должен использовать DIVs, чтобы дать мне больше контроля?

Ответ 1

Если я читаю это правильно, вы пытаетесь оседлать границу между двумя ячейками таблицы, которая не будет работать. Вам нужно будет консолидировать первые две ячейки в правом столбце, а затем rowspan = "2" новую ячейку с номером в ней. Затем сверху или снизу вертикально выровняйте текст в ячейке и добавьте верхнюю часть, пока она не будет правильно выровнена.

Ответ 2

Если вы хотите переместить его вниз, вам нужно переместить его положительный 6px, а не отрицательный 6px, и установите верхний свойство, а не снизу

position: relative;
top: 6px;

Ответ 3

Вам может быть лучше использовать:

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

Сложно узнать больше, не используя какой-либо контекст того, что еще находится вокруг этой ячейки таблицы.

Ответ 4

Ярлык является встроенным элементом, 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; }

Ответ 5

Используйте padding-top:6px; вместо позиционирования, которая может стать очень грязной по отношению к элементам-братьями и т.д. и имеет другие эффекты.