Documentation

Margins, indents, dimensions

Margin, padding and containers

Margins are the outer space around an element, while indentation or padding refers to the inner space. A new element called a container is introduced that combines both elements.

codedisplay
<div style="border:1px red solid;"> Fusce iaculis nisi massa, non efficitur lectus porta quis. <div style="border:1px blue solid;">Ut congue fringilla laoreet.</div> Aliquam ac ipsum hendrerit, pretium dui sed </div>
Fusce iaculis nisi massa, non efficitur lectus porta quis.
Ut congue fringilla laoreet.
Aliquam ac ipsum hendrerit, pretium dui sed
<div style="border:1px red solid;"> Fusce iaculis nisi massa, non efficitur lectus porta quis. <div class="mgn" style="border:1px blue solid;">Ut congue fringilla laoreet.</div> Aliquam ac ipsum hendrerit, pretium dui sed </div>
Fusce iaculis nisi massa, non efficitur lectus porta quis.
Ut congue fringilla laoreet.
Aliquam ac ipsum hendrerit, pretium dui sed
<div style="border:1px red solid;"> Fusce iaculis nisi massa, non efficitur lectus porta quis. <div class="pad" style="border:1px blue solid;">Ut congue fringilla laoreet.</div> Aliquam ac ipsum hendrerit, pretium dui sed </div>
Fusce iaculis nisi massa, non efficitur lectus porta quis.
Ut congue fringilla laoreet.
Aliquam ac ipsum hendrerit, pretium dui sed
<div style="border:1px red solid;"> Fusce iaculis nisi massa, non efficitur lectus porta quis. <div class="container" style="border:1px blue solid;">Ut congue fringilla laoreet.</div> Aliquam ac ipsum hendrerit, pretium dui sed </div>
Fusce iaculis nisi massa, non efficitur lectus porta quis.
Ut congue fringilla laoreet.
Aliquam ac ipsum hendrerit, pretium dui sed

Position

Position from one element relative to another

codedisplay
<div style="border:1px red solid; width:300; height:300;"> Fusce iaculis nisi massa, non efficitur lectus porta quis. <div class="right" style="border:1px blue solid;">Ut congue fringilla laoreet.</div> Aliquam ac ipsum hendrerit, pretium dui sed </div>
Fusce iaculis nisi massa, non efficitur lectus porta quis.
Ut congue fringilla laoreet.
Aliquam ac ipsum hendrerit, pretium dui sed
<div style="border:1px red solid; width:300; height:300;"> Fusce iaculis nisi massa, non efficitur lectus porta quis. <div class="center" style="border:1px blue solid;">Ut congue fringilla laoreet.</div> Aliquam ac ipsum hendrerit, pretium dui sed </div>
Fusce iaculis nisi massa, non efficitur lectus porta quis.
Ut congue fringilla laoreet.
Aliquam ac ipsum hendrerit, pretium dui sed
<div style="border:1px red solid; width:300; height:300;"> Fusce iaculis nisi massa, non efficitur lectus porta quis. <div class="bottom" style="border:1px blue solid;">Ut congue fringilla laoreet.</div> Aliquam ac ipsum hendrerit, pretium dui sed </div>
Fusce iaculis nisi massa, non efficitur lectus porta quis.
Ut congue fringilla laoreet.
Aliquam ac ipsum hendrerit, pretium dui sed
<div style="border:1px red solid; width:300; height:300;"> Fusce iaculis nisi massa, non efficitur lectus porta quis. <div class="middle" style="border:1px blue solid;">Ut congue fringilla laoreet.</div> Aliquam ac ipsum hendrerit, pretium dui sed </div>
Fusce iaculis nisi massa, non efficitur lectus porta quis.
Ut congue fringilla laoreet.
Aliquam ac ipsum hendrerit, pretium dui sed

Dimension

Margins are the outer space around an element, while indentation or padding refers to the inner space. A new element called a container is introduced that combines both elements.

codedisplay
<div class="size-90w size-80h" style="border:1px red solid;"> <div class="size-60w size-40h" style="border:1px blue solid;">:)</div> </div>
:)
<div class="size-full" style="border:1px red solid;"> <div class="size-20w size-80h" style="border:1px blue solid;">:)</div> </div>
:)

Search