Question: Is "hspace" and "vspace" still okay to use?

Forum Moderators: open

Message Too Old, No Replies

Question: Is "hspace" and "vspace" still okay to use?

Or, is something else more current?

MommyMooCow

2:40 am on Jun 27, 2002 (gmt 0)

I'm basically going to be lining up a bunch of pictures and I want to space them out. Is "hspace" still the best way to do that?

Thanks!

ann

5:00 am on Jun 27, 2002 (gmt 0)

Wellll,

It still works for me.

Ann

pageoneresults

5:12 am on Jun 27, 2002 (gmt 0)

[w3.org...]

They are both deprecated tags. I'm not sure what the CSS gurus are doing in this case.

I've been preplanning image positions and will add canvas when necessary to create horizontal and vertical space.

Nick_W

6:05 am on Jun 27, 2002 (gmt 0)

I'd say they were a definate NO!

Deprecated as pageone says. Just use CSS, it's very easy to do what you want:

If you want them just printed over the page then just give them all a generic margin like so:


.imgMargin {
  margin: 6px;
}

or if you want different margins use the shorthand notation (be kind to opera) like this:


.imgMargin {
  margin: 6px 3px 6px 3px; /*top,right,bottom,left*/
}

Then just:

HTH

Nick

papabaer

6:27 am on Jun 27, 2002 (gmt 0)

Hello, MMC!

You can use paddings or margins to provide spacing for your images. Technically, either (or both!) is allowed though margin support for images is broader that padding support in older browsers.

hspace & vspace are dead - don't use them at all!

Well, you know the old saying: A picture is worth a thousand words! Take note of the combined classes assigned to each image.

Hope this helps:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Image Styles & Box Model Propeties</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:20px;
font:12px georgia, "Book Antiqua", palatino, serif;
color:#000;
background:#fff;
}
a{
text-decoration:underline;
font-weight:bold;
}
a:link{
color:#699;
background-color: transparent;
}
a:visited{
color:#699;
background-color: transparent;
}
a:active{
color:#000;
background-color: transparent;
}
a:hover{
color:#066;
background-color: transparent;
text-decoration:underline overline;
}
p {
margin-top: 0; padding-top: 0;
line-height: 1.5em;
}
h1 {
font-size:24px;
font-family: helvetica, arial, sans-serif;
font-weight: bold;
color: #699;
background-color: transparent;
margin:5px 0 0 0;
}
h2 {
font-size:14px;
color:#666;
background-color:transparent;
margin:0;
padding:0 0 3px 10px;
}
h3{
font-size:14px;
}

h4 {
font-size:12px;
}

.first {
margin-top: 0;
padding-top: 0;
}
h3, h4,{
font-family: helvetica, arial, sans-serif;
font-weight: bold;
color: #699;
background-color: transparent;
margin:5px 0 0 0;
}

/* begin image styles */

.image-group {
margin:20px 0;
padding:0;
border: 1px solid #000;
background-color:#f0f8ff;
height:auto;
}
img.b3-r{
border:3px solid red;
}
img.b3-g {
border:3px solid green;
}
img.b3-b {
border:3px solid blue;
}
img.a {
width:100px;
height:120px;
}
img.b {
width:100px;
height:200px;
}
img.p5l {
padding:0 0 0 5px;
}
img.m5l {
margin:0 0 0 5px;
}
img.m0 {
margin:0;
}
img.p5rl {
padding:0 5px;
}
img.m5rl {
margin:0 5px;
}

</style>
</head>

<body>
<h1>CSS Styles Images & Box Model Properties</h1>
<div class="image-group">
<img alt="blank image" class="a b3-r"
title="Image with defaul inline text behavior " src="images/01.gif" /><img
alt="blank image" class="a p5l b3-g"
title="Image with 5px leftside padding ingnored" src="images/ 02.gif" /><img
alt="blank image" class="a m5l b3-b"
title="Image with 5px leftside margin rendered" src="images/03.gif" /><img
alt="blank image" class="a m0 b3-r" title="Image margin zero"
src="images/04.gif" /><img alt="blank image" class="a p5rl b3-g"
title="Image 5px right & left padding ingnored" src="images/05.gif" /><img
alt="blank image" class="a m5rl b3-r "
title="Image 5px right & left margins rendered" src="images/05.jpg" /><img
alt="blank image" class="a m5rl b3-g "
title="Image 5px right & left margins rendered" src="images/06.jpg" /><img
alt="blank image" class="a m5rl b3-b "
title="Image 5px right & left margins rendered" src="images/07.jpg" />
</div>

- papabaer