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

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

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

Browser support:

Specifies or returns the number of pixels to use as a margin at the top and bottom sides of an object.

This property is deprecated, use the margin style property instead.

Syntax:

object.vspace;

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

This property is read/write.

HTML page for this property: vSpace

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: this property has no default value.

Example HTML code 1:

This example illustrates the use of the vSpace 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 vSpace property:

Code

frame.htm

<head>
    <script type="text/javascript">
        function SetVSpace () {
            var input = document.getElementById ("yMargin");
            var imgContainer = document.getElementById ("imgContainer");
            var images = imgContainer.getElementsByTagName ("img");
            for (var i = 0; i < images.length; i++) {
                images[i].vspace = input.value;
            }
        }
    </script>
</head>
<body>
    Enter an integer to set the vspace property:<br />
    <input id="yMargin" type="text" value="5" />
    <button onclick="SetVSpace ();">Set vertical 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>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>Contents of the frame</h1>
</body>
</html>