How do I remove the vertical padding in a div table-cell?
9
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?
html css css-tables
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031337101
asked Jun 21 '13 at 12:32
JonathanJonathan
50731027
add a comment |
9
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?
html css css-tables
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031337101
asked Jun 21 '13 at 12:32
JonathanJonathan
50731027
add a comment |
9
9
9
3
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?
html css css-tables
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031337101
asked Jun 21 '13 at 12:32
JonathanJonathan
50731027
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?
html css css-tables
html css css-tables
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031337101
asked Jun 21 '13 at 12:32
JonathanJonathan
50731027
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031337101
asked Jun 21 '13 at 12:32
JonathanJonathan
50731027
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031337101
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031337101
edited Nov 20 '18 at 21:13
Brian Tompsett - 汤莱恩
4,2031337101
4,2031337101
asked Jun 21 '13 at 12:32
JonathanJonathan
50731027
asked Jun 21 '13 at 12:32
JonathanJonathan
50731027
asked Jun 21 '13 at 12:32
JonathanJonathan
50731027
50731027
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
26
.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;
}
answered Jun 21 '13 at 12:38
koningdavidkoningdavid
4,62442641
Duh-of course! I was wondering about that earlier if that would be needed, but it never made itself apparent (until now). Thanks! That's the answer.
– Jonathan
Jun 21 '13 at 12:41
@J-Law Glad to help!
– koningdavid
Jun 21 '13 at 12:43
9
Well, aligning to the top moves the padding to the bottom rather than removing it.
– Javarome
Jan 6 '16 at 17:00
4
What if he wants vertical-align: middle?
– Mr_Perfect
Mar 9 '17 at 14:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f17235326%2fhow-do-i-remove-the-vertical-padding-in-a-div-table-cell%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
26
.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;
}
answered Jun 21 '13 at 12:38
koningdavidkoningdavid
4,62442641
Duh-of course! I was wondering about that earlier if that would be needed, but it never made itself apparent (until now). Thanks! That's the answer.
– Jonathan
Jun 21 '13 at 12:41
@J-Law Glad to help!
– koningdavid
Jun 21 '13 at 12:43
9
Well, aligning to the top moves the padding to the bottom rather than removing it.
– Javarome
Jan 6 '16 at 17:00
4
What if he wants vertical-align: middle?
– Mr_Perfect
Mar 9 '17 at 14:05
add a comment |
26
.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;
}
answered Jun 21 '13 at 12:38
koningdavidkoningdavid
4,62442641
Duh-of course! I was wondering about that earlier if that would be needed, but it never made itself apparent (until now). Thanks! That's the answer.
– Jonathan
Jun 21 '13 at 12:41
@J-Law Glad to help!
– koningdavid
Jun 21 '13 at 12:43
9
Well, aligning to the top moves the padding to the bottom rather than removing it.
– Javarome
Jan 6 '16 at 17:00
4
What if he wants vertical-align: middle?
– Mr_Perfect
Mar 9 '17 at 14:05
add a comment |
26
26
26
.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;
}
answered Jun 21 '13 at 12:38
koningdavidkoningdavid
4,62442641
.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;
}
answered Jun 21 '13 at 12:38
koningdavidkoningdavid
4,62442641
answered Jun 21 '13 at 12:38
koningdavidkoningdavid
4,62442641
answered Jun 21 '13 at 12:38
koningdavidkoningdavid
4,62442641
answered Jun 21 '13 at 12:38
koningdavidkoningdavid
4,62442641
4,62442641
Duh-of course! I was wondering about that earlier if that would be needed, but it never made itself apparent (until now). Thanks! That's the answer.
– Jonathan
Jun 21 '13 at 12:41
@J-Law Glad to help!
– koningdavid
Jun 21 '13 at 12:43
9
Well, aligning to the top moves the padding to the bottom rather than removing it.
– Javarome
Jan 6 '16 at 17:00
4
What if he wants vertical-align: middle?
– Mr_Perfect
Mar 9 '17 at 14:05
add a comment |
Duh-of course! I was wondering about that earlier if that would be needed, but it never made itself apparent (until now). Thanks! That's the answer.
– Jonathan
Jun 21 '13 at 12:41
@J-Law Glad to help!
– koningdavid
Jun 21 '13 at 12:43
9
Well, aligning to the top moves the padding to the bottom rather than removing it.
– Javarome
Jan 6 '16 at 17:00
4
What if he wants vertical-align: middle?
– Mr_Perfect
Mar 9 '17 at 14:05
Duh-of course! I was wondering about that earlier if that would be needed, but it never made itself apparent (until now). Thanks! That's the answer.
– Jonathan
Jun 21 '13 at 12:41
Duh-of course! I was wondering about that earlier if that would be needed, but it never made itself apparent (until now). Thanks! That's the answer.
– Jonathan
Jun 21 '13 at 12:41
@J-Law Glad to help!
– koningdavid
Jun 21 '13 at 12:43
@J-Law Glad to help!
– koningdavid
Jun 21 '13 at 12:43
9
9
Well, aligning to the top moves the padding to the bottom rather than removing it.
– Javarome
Jan 6 '16 at 17:00
Well, aligning to the top moves the padding to the bottom rather than removing it.
– Javarome
Jan 6 '16 at 17:00
4
4
What if he wants vertical-align: middle?
– Mr_Perfect
Mar 9 '17 at 14:05
What if he wants vertical-align: middle?
– Mr_Perfect
Mar 9 '17 at 14:05
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f17235326%2fhow-do-i-remove-the-vertical-padding-in-a-div-table-cell%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
