In order to access this site you need to enable JavaScript!

You are here: Reference > HTML > attributes > hSpace (iframe, img, object, ...)

hSpace attribute (iframe, img, object, ...)

Browser support:

Specifies the number of pixels to use as a margin at the left and right sides of the object.

This attribute is deprecated. Use the margin style property instead.

JavaScript page for this attribute: hspace. You can find other example(s) there.

Possible values:

Integer that sets the amount of spaces before and after the element. Do not write the unit 'px' after the integer, because it is not supported by Internet Explorer.

Default: 0.

Example HTML code 1:

This example illustrates the use of the hSpace attribute:

Each image has a 5px margin:<br />
    <img src="picture.gif" width="30px" height="30px" hspace="5" vspace="5" />
    <img src="picture.gif" width="30px" height="30px" hspace="5" vspace="5" />
    <br />
    <img src="picture.gif" width="30px" height="30px" hspace="5" vspace="5" />
    <img src="picture.gif" width="30px" height="30px" hspace="5" vspace="5" />

    <br /><br /><br />

    Each image has a 10px margin:<br />
    <img src="picture.gif" width="30px" height="30px" hspace="10" vspace="10" />
    <img src="picture.gif" width="30px" height="30px" hspace="10" vspace="10" />
    <br />
    <img src="picture.gif" width="30px" height="30px" hspace="10" vspace="10" />
    <img src="picture.gif" width="30px" height="30px" hspace="10" vspace="10" />

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

<head>
    <style>
        .margin5px {
            width: 30px;
            height: 30px;
            margin: 5px;
        }
        .margin10px {
            width: 30px;
            height: 30px;
            margin: 10px;
        }
    </style>
</head>
<body>
    Each image has a 5px margin:<br />
    <img src="picture.gif" class="margin5px" />
    <img src="picture.gif" class="margin5px" />
    <br />
    <img src="picture.gif" class="margin5px" />
    <img src="picture.gif" class="margin5px" />

    <br /><br /><br />

    Each image has a 10px margin:<br />
    <img src="picture.gif" class="margin10px" />
    <img src="picture.gif" class="margin10px" />
    <br />
    <img src="picture.gif" class="margin10px" />
    <img src="picture.gif" class="margin10px" />
</body>