Strange padding on div

Question

enter image description here

The grey border shouldn't be visible, it should be covered by the black border and I don't understand why it won't... here's the CSS code:

#portrait{
  width:120px;
  height:100px;
  top:20px;
  border: solid black 1px;
  margin: 0px;
  padding: 0px;
  cursor:pointer;
}

#prof_picture{
    width: inherit;
    height: inherit;
    border: none;
}

HTML (inside a table):

<td id="portrait">
    <img id="prof_picture"></img>
</td>

and javascript

$("#prof_picture").attr('src',"profile/loading.gif");

I had to make the DOM inherit part of the attributes because when using that javascript line the image would assume its natural width and height and I wanted it just to fit the portrait. When I did this, the strange border appeared. Do you know why?

Can you post the full source code in a fiddle? Did you check the cellpadding, cellspacing and border attributes on the table? — Paul Redmond, Dec 19 '13 at 22:45
Care to flesh out this jsfiddle I started for you? http://jsfiddle.net/CyV7j/ — dyln, Dec 19 '13 at 22:47
Updated @dylan JSFiddle to include jQuery: http://jsfiddle.net/CyV7j/1/ — ZenMaster, Dec 19 '13 at 22:48
possible duplicate of [why is this container div taller than required to wrap the image it contains?](http://stackoverflow.com/questions/8522047/why-is-this-container-div-taller-than-required-to-wrap-the-image-it-contains) — davidpauljunior, Dec 19 '13 at 22:49

score 1 · Answer 1 · answered Dec 19 '13 at 22:46

1

Add font-size: 0; to #portrait{}

answered Dec 19 '13 at 22:46

TunaMaxx

1,782
12
18

SquareCat · Answer 2 · 2013-12-19T22:51:52.503

Try setting your image to become a block element:

#prof_picture { display:block; }

Alternatively you could set it to align to the bottom (will work only if its an inline (or inline-block) element), although i think there may be cases or environments where this could produce unwanted results.

#prof_picture { vertical-align: bottom; }

Images are, by default (unless specified otherwise), inline elements. Most browsers will reserve some extra space here, but you could also counter this by setting the parent's line-height to zero.

#portrait{
    line-height: 0;
}

score 0 · Answer 3 · answered Dec 19 '13 at 22:48

0

I suggest you get rid of the border: none; by #prof_picture. You can also try to write the border on #portrait li this

 border: 1px solid black;

As it is the right way to write a border.

answered Dec 19 '13 at 22:48

score 0 · Answer 4 · answered Dec 19 '13 at 22:54

0

If you are using certain browsers.... you need to set this in the css:

img{
    outline:none;
}

answered Dec 19 '13 at 22:54

Andrew

18,680
13
103
118

score 0 · Accepted Answer · answered Dec 19 '13 at 23:00

Setting line-height: 0;, font-size: 0; or display: inline; on #profile Fixes it in the fiddle http://jsfiddle.net/CyV7j/6/

There is 4px of extra space added around the img element because of the way inline elements (line an img) are rendered inside of a table row.

Please consider styling with classes instead of ids. And restricting the use of tables to tabular data and not for the layout of photos.

Strange padding on div

5 Answers5