0

Having HTML code

<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>
        <img src="...">
      </td>
    </tr>
  </tbody>
</table>

with CSS styles

* {
    border: none;
    margin: 0;
    padding: 0;
}
table {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 92px;
    margin-left: -55px;
    margin-top: -46px;
}
img {
    width: 110px;
    height: 92px;
}

accessible in this fiddle,

I would expect to have no margin, no padding and no border in the table content. However table height is not same as the image height. There are some extra pixels somewhere in td element.

What is a problem here? Is it style or html code?

Ωmega
  • 42,614
  • 34
  • 134
  • 203
  • [Related question](http://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css/3209434). However, if you're only using your table as a wrapper for the image, you really should use a different element like `
    ` and style that instead.
     – Blazemonger Dec 17 '13 at 21:48
  • 1
    @Blazemonger - Not very related question... and `
    ` is a new HTML5 element, so its support is limited.
     – Ωmega Dec 17 '13 at 21:52
  • `
    ` is [widely supported in modern browsers](http://caniuse.com/#feat=html5semantic), and [is easily added to older versions of IE](https://code.google.com/p/html5shiv/). There's no good reason to be using tables like this instead of [modern, semantic HTML](http://diveintohtml5.info/semantics.html) unless you're targeting a third-world audience.
     – Blazemonger Dec 17 '13 at 21:56

2 Answers2

2

It's your CSS.

Adding display:block; to the img css fixes the issue for you.

Table cells larger than they are meant to be

Community
  • 1
  • 1
DMortensen
  • 141
  • 4
1

It looks like an alignment issue with you image,

img {
    width: 110px;
    height: 92px;
    vertical-align:middle;
}

should fix it, this fiddle shows the fix above.

Last1Here
  • 1,099
  • 2
  • 10
  • 21