CodeDragon circular icon

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.

Or, you can continue anyway.

CSS: Padding & borders

CSS/3

Two more important concepts in CSS - these are part of the box model, explained in the previous tutorial.

Written by Pal Kerecsenyi

CSS: Padding & borders

Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 

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

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

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.

End of tutorial