Space round images

S

Sally Thompson

I've been trying to improve my css and I've been struggling with a way
to put a set amount of padding round all my images in my stylesheet
and cannot find a way. Is this possible? At the moment, whenever I
include an image I put, eg, hspace="10" as in
<img src="image.jpg" align="left" width="275" height="206" border="0"
hspace="10" alt="blabla" title="bblabla">.
However, I believe that hspace and vspace are deprecated. What I want
to do is put something in the stylesheet which will apply to all
images but not to the paragraph containing the image.
 
E

Els

Sally said:
I've been trying to improve my css and I've been struggling with a way
to put a set amount of padding round all my images in my stylesheet
and cannot find a way. Is this possible? At the moment, whenever I
include an image I put, eg, hspace="10" as in
<img src="image.jpg" align="left" width="275" height="206" border="0"
hspace="10" alt="blabla" title="bblabla">.
However, I believe that hspace and vspace are deprecated. What I want
to do is put something in the stylesheet which will apply to all
images but not to the paragraph containing the image.
Click to expand...


Like this?
<html>
<head>
<title>images with space around them</title>
<style type="text/css">
img{margin:5px;}
</style>
</head>
<body>
<p>
<img src="image.jpg" alt="bla" title="blabla">
</p>
</body>
</html>

(images don't have padding btw, just margins)
 
S

Sally Thompson

Like this?
<html>
<head>
<title>images with space around them</title>
<style type="text/css">
img{margin:5px;}
</style>
</head>
<body>
<p>
<img src="image.jpg" alt="bla" title="blabla">
</p>
</body>
</html>

(images don't have padding btw, just margins)
Click to expand...

Brilliant! I will go and try it. Thanks so much.
 
G

GD

Els said:
images don't have padding btw, just margins
Click to expand...

Sure they have padding, it's just that old browsers like IE5 and NS4
don't support it. Try this in Mozilla, Opera or IE6 in standards mode
to see the gap between the image and its border:

<img src="file.gif" width="100" height="100" alt="alt text here"
style="background:red; color:white; padding:10px; border:black solid thick;">
 
E

Els

Toby said:
Images can have padding, however some browsers don't like it.
http://www.goddamn.co.uk/tobyink/scratch/padding
Click to expand...

Okay, so, images can have padding, according to HTML.
Still, I'd say the image container has padding, as the image
itself can't have padding. Padding is on the inside of the
border, and in your example, the border is 20px away from
the image. I don't call that the border of the image.

But, I do now understand, that HTML doesn't agree with me on
this :)
 
G

GD

Els said:
Okay, so, images can have padding, according to HTML.
Click to expand...

No, the IMG element can have padding according to CSS ;-)

The image file is the content of the IMG element but there's no
reason not to have margin, padding, colours and border on the element itself,
just like any other box.
 
T

Toby A Inkster

Els said:
Still, I'd say the image container has padding, as the image
itself can't have padding. Padding is on the inside of the
border, and in your example, the border is 20px away from
the image. I don't call that the border of the image.
Click to expand...

With images, as with headings, paragraphs or any other elements, the
padding is _between_the_content_and_the_border_.
 
E

Els

Toby said:
Els wrote:




With images, as with headings, paragraphs or any other elements, the
padding is _between_the_content_and_the_border_.
Click to expand...

Understood.
Thanks to both of you, GD and Toby; just combining your
messages makes me understand, that <IMG> is not the picture,
but the 'IMG element' which contains the picture "found"
in 'SRC='

Thanks.
You know, sometimes I ask something (in this and in other
groups) and I don't get any (or an imcomplete) answer. But I
noticed, that if I give a wrong answer to someone else's
question, very quickly I get answers of which I learn a lot ;-)
 
S

Steve Pugh

Els said:
Understood.
Thanks to both of you, GD and Toby; just combining your
messages makes me understand, that <IMG> is not the picture,
but the 'IMG element' which contains the picture "found"
in 'SRC='
Click to expand...

Nearly there. ;-)

<img> is the "img element" which contains EITHER the picture specified
in the src attribute OR the text specified in the alt attribute.

Decent browsers will even apply any CSS styles specified for img to
the alternative text when that's displayed.

Steve
 
E

Els

Steve said:
Nearly there. ;-)

<img> is the "img element" which contains EITHER the picture specified
in the src attribute OR the text specified in the alt attribute.
Click to expand...

I knew that! ;-)
Decent browsers will even apply any CSS styles specified for img to
the alternative text when that's displayed.
Click to expand...

Cool :)
 
S

Spartanicus

Steve Pugh said:
Decent browsers will even apply any CSS styles specified for img to
the alternative text when that's displayed.
Click to expand...

Incorrect behaviour, alt content should inherit styling from it's parent
container.
 
G

GD

Spartanicus said:
Incorrect behaviour, alt content should inherit styling from it's parent
container.
Click to expand...

That's like saying the span here:

<p style="color:red">
Round the <span style="color:blue">ragged</span> rock,
the Dizzy Rascal ran.
</p>


should be red, not blue. If a CSS rule for an IMG element sets font,
colour or box styles then they should be applied.
 
S

Spartanicus

GD said:
That's like saying the span here:

<p style="color:red">
Round the <span style="color:blue">ragged</span> rock,
the Dizzy Rascal ran.
</p>


should be red, not blue.
Click to expand...

Inheritance only applies when an element has no specific styling
specified. Your example span content is specified to be blue, thus that
is how it should be rendered.
 
S

Spartanicus

Spartanicus said:
Incorrect behaviour, alt content should inherit styling from it's parent
container.
Click to expand...

img{color:red} should of course be applied to alt content, not so with
width, padding, border etc.
 
G

GD

Spartanicus said:
"GD" <[email protected]> wrote:
Click to expand...
Inheritance only applies when an element has no specific styling
specified.
Click to expand...

The quote you replied to was:
"Decent browsers will even apply any CSS styles specified for img"

To which you replied:
"Incorrect behaviour, alt content should inherit styling from it's parent"

Your example span content is specified to be blue, thus that
is how it should be rendered.
Click to expand...

The poster was talking about "CSS styles specified for img". Do you see?

You can learn more about CSS here:
http://www.w3schools.com/

HTH
 
G

GD

I suggest you read up on it:
http://www.w3.org/TR/CSS2/cascade.html#inheritance
Click to expand...

Indeed I did, but I'm still at a loss to understand your claim that it
would be "Incorrect behaviour" for the alt text in the following example
to be red and not blue (when rendered) given that there are "CSS styles
specified for img"

<p style="color:red">
Round the ragged rock, the
<img src="dr.gif" alt="Dizzy Rascal" style="color:blue">
ran.
</p>
 
S

Spartanicus

GD said:
Indeed I did, but I'm still at a loss to understand your claim that it
would be "Incorrect behaviour" for the alt text in the following example
to be red and not blue (when rendered) given that there are "CSS styles
specified for img"

<p style="color:red">
Round the ragged rock, the
<img src="dr.gif" alt="Dizzy Rascal" style="color:blue">
ran.
</p>
Click to expand...

I made no such claim (as you well know), the original statement was a
blanket statement covering all properties, my initial reply was also to
course. It requires a finer definition, as you have noticed the above
case was dealt with in my follow up post, hence there was no point in
posting the code above.

Your initial example shows an incorrect understanding of how css
inheritance works.
 
S

Steve Pugh

Spartanicus said:
I suggest you read up on it:
http://www.w3.org/TR/CSS2/cascade.html#inheritance
Click to expand...

I don't see anything pertaining to the img element there. Can you
point us at a more specific passage?

If I set img {border: 10px solid red;} then I would expect that border
to be applied to the img element regardless of whether that element
contained a graphic or alt text.

Styles that can only apply to replaced or non-replaced inline elements
would be an exception as they could only be applied to one or the
other content.

Steve
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Flip-Cards with Local Images 1
Having difficulty with the layout of these images / video for this web page 2
SendGrid email issue in responsive Gmail 1
Image not changing between "mute" & "un-mute" images. 5
Help with Visual Lightbox: Scripts 2
Help with code 0
Help with my responsive home page 2
Survey details won't go through using php, ajax, Mysql 0

Members online

No members online now.
Total: 27 (members: 1, guests: 26)
Robots: 217

Forum statistics

Threads
473,763
Messages
2,569,563
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top