Стол получает 1px нежелательных дополнений - PullRequest
11 голосов
/ 11 июля 2011

По какой-то причине я получаю отступ в 1 пиксель или границу на столе.Я не могу понять, как избавиться от этого.Я попытался добавить display:block;margin:0;padding:0; к изображениям, но это не решает проблему.Я также пробовал <table border="0"> и border:none; в CSS.Что касается жизни, я не могу понять это.

Причина, по которой это проблема, заключается в том, что я пытаюсь выровнять изображения с краями по обе стороны от tr, чтобы придать им округлостьграницы, так как CSS3 border-radius не работает на TR.Я добавил table, table * {border:1px solid red;} в CSS, и с этой точки зрения это выглядит как проблема с отступами или полями.

Проблема в этом изображении:

image

on the left and right sides, you can see there's some kind of padding or something between the images and the edge of the table. The red borders are there just to see this.

Here's my CSS:

table a {
    color: #f7941E;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    /* css3 */
    transition: color .25s;
    -khtml-transition: color .25s;
    -moz-transition: color .25s;
    -o-transition: color .25s;
    -webkit-transition: color .25s;
}

    table a:hover {
        color: #f8ae57;
    }

table {
    width: 610px;
}

    table tr {
        height: 33px;
        padding: 0;
        margin: 0;
        vertical-align: middle;
    }

        table td {
            border-collapse: collapse;
        }

    table tr.head {
        color: #58585a;
        font-family: Rockwell, serif;
        font-size: 18px;
        font-weight: bold;
        text-transform: lowercase;
    }

    table tr.even {
        background: #EEE;
        height: 33px;
    }

        table tr td img {
            padding: 0 15px 0 13px;
            vertical-align: middle;
        }

            table tr td a img {
                opacity: .6;                
                /* css3 */
                transition: opacity .25s;
                -khtml-transition: opacity .25s;
                -moz-transition: opacity .25s;
                -o-transition: opacity .25s;
                -webkit-transition: opacity .25s;
            }

                table tr td a img:hover {
                    opacity: 1;
                }

And the HTML:

 
image image Некоторое содержимое image

Ответы [ 3 ]

19 голосов
/ 11 июля 2011

Попробуйте: <table border="0" cellpadding="0" cellspacing="0">

11 голосов
/ 11 июля 2011

Это, казалось, исправило вещи для меня.

CSS:

table {
    width: 610px;
    border-spacing:0; /* Add this here */
}
1 голос
/ 30 августа 2016

Моя проблема была в каком-то странном поведении, и я перепробовал все приемы в книге, но это padding было упрямым.Наконец, я обнаружил, что атрибут line-height, установленный для элемента body, создает эффект padding-top.После переопределения, которое по локализованному правилу

line-height: normal;

... проблема была решена.

...