Reduce padding between table text

Question

I want to remove the padding between the rows and between the two lines of text:

 <br />

Please see the explanation below:

http://79.170.44.112/activate-enterprise.co.uk/wp-content/uploads/2014/09/meet-the-team-image.jpg

My table html can be seen at: http://jsfiddle.net/63nzsht1/

My webpage can be seen at:

http://79.170.44.112/activate-enterprise.co.uk/meet-the-team/

The text is in a separate row (both lines of text in the same cell).

Many thanks!

P.S. Tried

cellpadding="0" cellspacing="0"

But I'm still getting the spacing issue, think it must be being pulled from somewhere else?

score 0 · Answer 1 · answered Sep 08 '14 at 13:47

0

Try cellpadding="0" cellspacing="0" properties at the table!

answered Sep 08 '14 at 13:47

Giannis Grivas

3,374
1
18
38

score 0 · Answer 2 · answered Sep 08 '14 at 13:47

0

The cellpadding and cellspacing attributes are supported in all major browsers.

 <table cellpadding="0" cellspacing="0" >
  <tr>
    <th>h1</th>
    <th>h2</th>
  </tr>
  <tr>
    <td>m</td>
    <td>m</td>
  </tr>
</table>

answered Sep 08 '14 at 13:47

Hamix

1,323
7
18

score 0 · Accepted Answer · edited May 23 '17 at 12:05

There are multiple things causing a gap between the image and the text:

Because images are displayed inline, there is a reserved gap beneath inline elements to make way for letter descenders. Display your images as blocks or alter their vertical alignment to lost the gap.
Your table cells display their content in the middle, vertically, by default. So your text is vertically aligned in the middle, not the top. They also have a default padding, remove this.
Your table has border spacing by default, which can be removed with border-spacing:

img { display:block; }
table { border-spacing:0; }
td { vertical-align:top; padding:0; }

JSFiddle

dstN · Answer 4 · 2014-09-08T13:58:20.480

0

Try adding

padding: 0;
line-height: 12px;

to element td which has text in it (define class for that).

http://jsfiddle.net/63nzsht1/10/

edited Sep 08 '14 at 13:58

answered Sep 08 '14 at 13:49

dstN

332
6
21

score 0 · Answer 5 · answered Sep 08 '14 at 13:57

0

table {
    line-height:0.8em;
}
td {
    padding:0;
    margin:0;
    vertical-align:top;
}
img {
    display:block;
}

http://jsfiddle.net/63nzsht1/9/

answered Sep 08 '14 at 13:57

Beowolve

548
2
13

score 0 · Answer 6 · answered Sep 08 '14 at 13:58

0

You need to set the padding to 0px and set the line height to a specific number:

The distance between lines will change using line height.

th, td {
  padding: 0px;
  line-height: 10px;
}

answered Sep 08 '14 at 13:58

Arman Fatahi

2,635
3
24
37

score 0 · Answer 7 · answered Sep 08 '14 at 14:05

0

<a href="/cilla/" style=" line-height: 1;">
<span style=" display: block;  line-height: 1.7;">Managing Director</span>
<span style="display: block;"> Cilla McKay</span>
</a>

one of way to solve ur problem

answered Sep 08 '14 at 14:05

yugi

834
1
15
28

Reduce padding between table text

7 Answers7