Html – Image Padding in CSS, HTML

csshtml

I'm having problems with images in a table. Although I set tr width=95, and image has width of 95 as well, the tr will automatically have a width of 97 (2 px padding on the right).

However, I've explicitly stated style="padding: 0px".

A sample page is as follows:
http://beta.worcell.com/sony.html

Another problem that I have is with the up and down arrows (inside the buy column). I would like them to have equal spacing from the text box, but adding another line break to the bottom arrow would create too much of a space. Would I be able to change that in CSS?

Thank you.

Best Answer

The padding doesn't look to be the issue, it's the margins you have set. In the stylesheet you have

img {
    padding:0px;
    border:0px;
    margin:-2px;
}

The "margin: -2px;" part is what is making your images 97px rather than 95px. Set it to "margin: 0px;" and the images appear normal. You then also need to add,

menu img {
    margin: -2px;
}

in order to keep your menu images aligned as you had them.

For the up and down arrows you need to re-think your markup. The down link is within a form, yet the up link isn't, which is a bit inconsistent. They're also contained within paragraph tags which are displaying as blocks, which is making them appear one below the other, so the down arrow doesn't appear until after the bottom of the quantity box, etc.

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Html – Vertically align text next to an image

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60">
  <span style="">Works.</span>
</div>

Tested in FF3.

Now you can use flexbox for this type of layout.

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

Best Answer

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Html – Vertically align text next to an image

Related Topic