Padding

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 the amount of space between the edge of the element and its actual contents.

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.

Padding in CSS

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:

Your turn

1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
2. Drag the combined yellow header block inside the body. We've put a border on it (you'll learn about this later) so you can see the effect of padding ⁠— just ignore it for now.
3. Type some text inside the header.
4. Drag the purple padding block inside the header's purple style= block, and duplicate it 3 times to have 4 padding blocks.
5. Change the dropdowns of the padding blocks so each of them show different sides.
6. Play with the pixel values of the padding blocks and see what happens!

Borders

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.

Borders in CSS

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.

Your turn

1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
2. Drag the yellow header block inside the body and type some text inside it.
3. Drag the purple style= block onto the side of the yellow header block.
4. Drag the border block inside the purple style block and play around with its options.