Tutorial by Examples

Direction-Specific Properties CSS allows you to specify a given side to apply margin to. The four properties provided for this purpose are: margin-left margin-right margin-top margin-bottom The following code would apply a margin of 30 pixels to the left side of the selected div. View Resu...

When two margins are touching each other vertically, they are collapsed. When two margins touch horizontally, they do not collapse. Example of adjacent vertical margins: Consider the following styles and markup: div{ margin: 10px; } <div> some content </div> <div&gt...

As long as the element is a block, and it has an explicitly set width value, margins can be used to center block elements on a page horizontally. We add a width value that is lower than the width of the window and the auto property of margin then distributes the remaining space to the left and the ...

p { margin:1px; /* 1px margin in all directions */ /*equals to:*/ margin:1px 1px; /*equals to:*/ margin:1px 1px 1px; /*equals to:*/ margin:1px 1px 1px 1px; } Another exapmle: p{ margin:10px 15px; /...

Margin is one of a few CSS properties that can be set to negative values. This property can be used to overlap elements without absolute positioning. div{ display: inline; } #over{ margin-left: -20px; } <div>Base div</div> <div id="over">Overlapping div&lt...

It is obvious to assume that the percentage value of margin to margin-left and margin-right would be relative to its parent element. .parent { width : 500px; height: 300px; } .child { width : 100px; height: 100px; margin-left: 10%; /* (parentWidth * 10/100) => 50px ...