CoderTools Web site

CSS Margin - Changing the Margin of an HTML Element

Description



This command is used to change the size of the margin. The behaviour is slightly different for block elements and inline elements.
For block elements all margins are affected and the margins will not overlap any other elements. For inline elements the margins may overlap the surrounding elements.
    margin: length;
    or
    margin: percentage;
    or
    margin: auto;
HTML & CSS Editor with FTP / FTPS

Examples for margin



test text test text test text test text
    <style>
        #test { margin: 50px; border:1px solid black; }
        #outer { border:1px solid black; }
    </style>
    
    <div id="outer">
        <div id="test">test text test text test text test text</div>
    </div>

test text test text test text test text
    <style>
        #test2 { margin: 15px; border:1px solid black; }
        #outer { border:1px solid black; }
    </style>
    
    <div id="outer">
        <div id="test2">test text test text test text test text</div>
    </div>

In internet explorer margins around inline elements are honored However, in firefox the margin-top is ignored for inline elements.

test text test text test text test text
    <style>
        #test3 { margin: 15px; border:1px solid black; }
        #outer { border:1px solid black; }
    </style>
    
    <span id="outer">
        <span id="test3">test text test text test text test text</span>
    </span>

Values for margin


Name Values Description
margin length
%
auto
Specifies the size of the margin.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

3/27/2017 4:24:59 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP