CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.
Or, you can continue anyway.
Two more important concepts in CSS — these are part of the box model, explained in the previous tutorial.
Margins are the extra area outside a box element. Padding is sort of like margin - the only difference is, padding is inside the element. It's .
Here's a demonstration (remember: just like margins, padding applies on all sides of the element by default):
Padding is really useful for making your site seem less crowded, just like margins.
Just like with margins, a shorthand property exists for applying the same padding size to all sides of an element:
Once again, just like with margins, CodeDragon only supports the specific-side properties of padding:
You literally just saw borders in action in the example above. They're quite simple in reality. A border goes between the padding and the margin of a box element (protruding outwards by default).
Typically, a border is a coloured line put around an element. It helps to make it look different from other elements, and using another CSS property, it can also be made to be curved. A border can also be a gradient or even an image, although CodeDragon doesn't support this.
Here's the simplest way (and also the CodeDragon way) to define a border in CSS:
As you can tell, there's 3 pieces of information being set:
The width of the border.
The style of the border (solid/dashed/dotted/etc)
The colour of the border
It's quite simple.