Google+ logo Twitter logo Youtube logo

Padding and margin


Padding and margin

Very often you want to push text a bit from the side. In the example (down here) we're gonna introduce two new properties; padding and margin.

Both properties are ment for intendation. Simplyfied; padding is applied inside the HTML element and margin is applied outside the HTML element.



A block
A div is pretty much a block
just another block!

In the example above we can see that the margin is applied outside the HTML element, were the padding is applied inside the HTML element.

Padding and margin can also be applied at just one side of the element. say; we want the text to be intended, it could be done like this;


In this example the text is intended 25 pixels from the left-side. This method can also be applied for the other sides; top, right and bottom.

Here's an overview of the possibilities;

Property Possible value Explanation
padding examples: 10px, 23px, 1000px Indentation at the inside of the element
margin examples: 10px, 23px, 1000px Indentation at the outside of the element
padding-left same as above Padding but then only applied at the left side. This method can also be used with the other "sides"; padding-right, padding-top, padding-bottom
margin-left idem dito Margin but then only applied at the left side. This method can also be used with the other "sides"; margin-right, margin-top, margin-bottom


Leave a comment ...

Name (will be visible)
E-mailaddress (will not be shown)
Comment
Type the code illustrated below

Back to top