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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > hspace (iframe, img, object, ...)

hspace property (iframe, img, object, ...)

Browser support:

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

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

Syntax:

object.hspace;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: hSpace

Possible values:

Integer that sets or retrieves 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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the hSpace property:

<head>
    <script type="text/javascript">
        function SetHSpace () {
            var input = document.getElementById ("xMargin");
            var imgContainer = document.getElementById ("imgContainer");
            var images = imgContainer.getElementsByTagName ("img");
            for (var i = 0; i < images.length; i++) {
                images[i].hspace = input.value;
            }
        }
    </script>
</head>
<body>
    Enter an integer to set the hspace property:<br />
    <input id="xMargin" type="text" value="5" />
    <button onclick="SetHSpace ();">Set horizontal margin!</button>

    <br /><br /><br />
    
    <div id="imgContainer">
        <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" />
    </div>
</body>