Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I remove the vertical padding in a div table-cell?

Take this web example into account (it seems to have the same issue) I have the following CSS on my website (note the space between the #head and #body <div>'s):

#body {
        display: table;
        border-spacing: 0;
        border-collapse: collapse;
}

#body-row {
        display: table-row;
        margin: 0;
        padding: 0;
}

.column-left, .column, .column-right {
        display: table-cell;
        padding: 0px;
        border: dotted 2px #89E;
}

.column-left, .column-right {
        width: 190px;
        font-size: .95em;
}

However, this still adds a space between the very top and bottom of the table-cell. Padding and margin do no seem to do anything for this. Advice?

like image 329
Jonathan Avatar asked Jun 21 '13 12:06

Jonathan


People also ask

How do I reduce cell padding in HTML?

Complete HTML/CSS Course 2022 Cell padding is the space between cell borders and the content within a cell. To set cell padding in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property padding.

How do I get rid of padding in CSS?

Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation. To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

How do I remove TD padding in HTML?

The pre-CSS way to remove cellpadding and cellspacing from tables was to set the table cellpadding and cellspacing attributes to zero. However it's a nuisance to have to do this to all tables and it's easier to do this with CSS.

How do you remove margin and padding in CSS?

Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .


1 Answers

.column-left, .column, .column-right {
    vertical-align: top; /* add vertical align top to fix this issue */
    display: table-cell;
    padding: 0px;
    border: dotted 2px #89E;
}
like image 90
koningdavid Avatar answered Nov 15 '22 23:11

koningdavid