CODEWITHSUNDEEP
htmlcss
Leem.fin
Leem.fin

Reputation: 42612

Why the image is not occupy the whole td content area?

I have a HTML table, I would like to show an image as the content of a <td> element, and make the image occupy the whole <td> content area, so, I did the following thing:

<td id="my-img">                
<img border="0" src="images/my.png" alt="Logo" width="60px"/>                  
</td>

I also used CSS to define the width of <td> which has the same width value as the <image> tag:

#my-img{
 width: 60px;
}

But, the image does not occupy the whole <td> area, there are white spaces around the image always, why? how to get rid of it? (I am sure the white spaces are not from the PNG image file)

Upvotes: 0

Views: 1748

Answers (4)

Kjartan
Kjartan

Reputation: 19111

Try what Nick Brunt wrote, but also include the following for the css for the image:

margin: 0px;

Upvotes: 1

Ivan Nikitin
Ivan Nikitin

Reputation: 4133

Try a different doctype for your html document: http://www.w3schools.com/tags/tag_doctype.asp XHTML sometimes solves similar problems.

If this doesn't help, consider using my.png as a background with background-repeat: no-repeat css style.

#my-img{
  width: 60px;
  background: no-repeat url(images/my.png);
}

Upvotes: 0

animuson
animuson

Reputation: 54729

Table cells have padding on them by default, which pushes the content in from the border.

You can either do:

<table cellpadding="0">

or you can do

<td style="padding: 0">

Depending on if you want to apply the zero padding to all table cells or just that specific table cell.

Also, providing the entire table in your question might allow us to help you further.

Upvotes: 0

Nick Brunt
Nick Brunt

Reputation: 10057

Two things:

Firstly, when defining width as an attribute of an html tag, you don't need the px, just width="60" will do.

Secondly, the spaces around the image are probably caused by padding around the table cell. Add this CSS:

#my-img{
 width: 60px;
 padding: 0px;
}

As a side note, simply changing the width of the picture will cause it to stretch, you need to make sure you change the height as well otherwise the aspect ratio will be off.

Upvotes: 0

Related Questions