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?
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.
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".
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.
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 .
.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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With