How to get rid of extra height from td? - html

Question

My html markup is:
<table>
<tbody>
<tr>
<td><span class="test">This is span.</span></td>
</tr>
</tbody>
css is:
.test{
font-size : 12px;
}
My span element take a height of 12px. So td should also have a height of 12px. But if I inspect in chrome developers tool, td has a height of 21px. Where is 9px coming from? How to get rid of it? Here is my code pen

Answer 1

set span to display:block
.test{
font-size : 12px;
display:block;
background : rgba(255,0,0,.5);
}
for removing default margin and padding of all elements use this
*{
margin:0;
padding:0;
}
* {
margin: 0;
padding: 0;
}
td {
background: black;
padding: 0;
margin: 0;
}
.test {
font-size: 12px;
display: block;
background: rgba(255, 0, 0, .5);
}
<table>
<tbody>
<tr>
<td><span class="test">This is span.</span>
</td>
</tr>
</tbody>
</table>
Edit
the issue is because of inline-block one fix is adding font-size:0; to parent removes the white-space
demo - http://jsfiddle.net/s4ufsbd3/
td {
background: black;
padding: 0;
margin: 0;
font-size:0;
}
* {
margin: 0;
padding: 0;
}
td {
background: black;
padding: 0;
margin: 0;
font-size: 0;
}
.test {
font-size: 12px;
display: inline-block;
background: rgba(255, 0, 0, .5);
}
<table>
<tbody>
<tr>
<td><span class="test">This is span.</span><span class="test">This is span.</span>
<span class="test">This is span.</span>
<span class="test">This is span.</span>
</td>
</tr>
</tbody>
</table>

Answer 2

Vitorino Fernandes solution does work, but you will have issues when you have text inside td since font size : 0px;.
<table>
<tbody>
<tr>
<td>SOME TEXT HERE<span class="test">This is span.</span></td>
</tr>
</tbody>
</table>
Here's my css to fix that issue.
td{
line-height : 0;
}
.test{
font-size : 12px;
display:inline-block;
background : rgba(255,0,0,.5);
line-height : 1;
}

Answer 3

Just add this style to td and check style="line-height : 0;"

Answer 4

As suggested, the line-height is the cause of this space. Also, others suggestions may works as well, but with this you can also adjust the height over and/or bellow the text to your taste using "margin".
HTML
<table>
<tbody>
<tr>
<td><p>This is a paragraph. This paragraph is looooooooooooooooong and wants overlap.</p></td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse; /*only if you don't want border space between the cells*/
}
td {
font-size:12px;
padding: 0;
margin: 0;
line-height:0;
}
p {
display:block;
line-height: 1em;
margin-top: 0px; /*adjust to your necessities*/
margin-bottom: 0px; /*adjust to your necessities*/
}