Please enable JavaScript.

CodeDragon relies on JavaScript to create a smooth experience. Without it, using the website is practically impossible. To make this warning disappear, please enable JavaScript. Here's a guide.

CodeDragon might not work properly for you...

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.

CSS: Padding & borders

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):

No padding

5px padding

20px padding

20px padding

50px padding

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

Drag the big blue basic structure block into the workspace. Change the title to anything you want.

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.

Type some text inside the header.

Drag the purple padding block inside the header's purple style= block, and duplicate it 3 times to have 4 padding blocks.

Change the dropdowns of the padding blocks so each of them show different sides.

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

Drag the big blue basic structure block into the workspace. Change the title to anything you want.