Documentation
Index
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.
| code | display |
|---|---|
| <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
| code | display |
|---|---|
| <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.
| code | display |
|---|---|
| <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> |
:)
|