CoderTools Web site

CSS margin-right - Changing the right Margin of an HTML Element

Description



This command is used to change the size of the right margin of an html element.

default value is 0.
    margin-right: length;
    or
    margin-right: percentage;
    or
    margin-right: auto;
    or
    margin-right: inherit;
See also: margin, margin-right, margin-right, margin-top
HTML & CSS Editor with FTP / FTPS

Examples for margin-right

Example 1:

Simple example using a div (block level element) to show large 50px right margin. We add a border to make it easy to see the margin. Note that the margin is the distance between the border and the outer edge of the element (see the box model). So the border is not affected by the margin.

test text test text test text test text
    <style>
       #test {  margin-right: 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>

Example 2:

test text test text test text test text

Same example but this time with a span (an inline element). One thing to note, inline elements do not collapse to the width of the enclosing element, the default size is to closely wrap the containing text and elements.

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

Example 3:

This time using a div with a negative -25px value for the right margin. This is a little weird - what happens is the div is shifted/expanded to the right by 25 pixels which overlaps the right border of the outer div.

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

Values for margin-right


Name Values Description
margin-right length
%
auto
Specifies the size of the right 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).

4/27/2017 7:15:55 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP