HTML and CSS for beginners – Part five

Web design and development based in Royston, Hertfordshire, United Kingdom

Griffiths Web Design

HTML and CSS for beginners – Part five

07709 579517

michael@griffithswebdesign.com

HTML and CSS for beginners – Part five

By Michael Griffiths

Created: 02.12.2016 00:00:00, last updated: 06.12.2016 00:00:00

HTML and CSS for beginners – Part five

HTML and CSS for beginners - part five

<< Back to HTML and CSS for beginners part 4



The box model


Every element in HTML is essentially a box. This box has a content area, padding between the content and the border, the border itself and the margin (this is a buffer between the element and everything around it.)


Below is an image which illustrates the box model in all its simplistic glory.


This is the css box model. Get to know it and get to love it

When you set the height and width of an HTML element in css you are actually just setting the height and width of the content area. To get a measure of the true size of the element you will need to add on the padding, border and the margin.


For example if you had the following in your CSS:


div {
width:200px;
height:250px;
padding:10px;
border:solid #000000 5px;
margin:15px;
}

The width of the div would be:


200px (the width of the content area) + 20px (10px padding each side) + 10px (5px border on each side) + 30px (15px margin on either side) = 260px (total width of the element).


The height of the div would be:


250px (the height of the content area) + 20px (10px padding above and below the content area) + 10px (5px border on the top and bottom.) + 30px (15px margin on the top and bottom of the element) = 310px (total height of the element).


Box sizing


As discussed moments ago there is a little bit of mathematics required to work out the true height and width of an element. Because we are web developers we avoid such complexity at all costs. As a result there is a property called box-sizing.


The box sizing property is used to tell the browser if the height and width should contain the border box or just the content box. As we know the default is just the content box.


Box sizing can take one of four values:



  • border-box - The height and width css properties will now include the padding and the border of the element but not the margin.

  • inherit -The element will inherit the property from its parent element.


Margin


HTML elements have a CSS property that goes by the name margin. You have seen this property used a few times in the examples. The margin acts as a buffer between the element it is assigned to and the elements that surround it.


There are four separate properties for margin, one for each side of an element.



  • margin-right

  • margin-bottom


As you may have noticed I have not used those properties in the examples. I used a short hand version.


margin:10px;

This tells the browser that you want 10 pixels of margin on each side of the elements.


margin:10px 45px;

When you use this version of the margin short hand notation then you are telling the browser that you wish it to add ten pixels of margin on the top and the bottom of the element and forty-five pixels of margin on both the left and the right side of the element.


margin:10px 12px 45px;

This example is a little different, we have only supplied it with three values. When we do this what we are telling the browser is that we want ten pixels of margin at the top, forty-five pixels of margin at the bottom. The interesting part is the middle value. This middle value in this example represents two sides of the box, the right and left sides. So basically we are adding twelve pixels of margin on the right and the left side.


margin:10px 12px 15px 45px;

In this example we have assigned ten pixels of margin at the top, twelve pixels of margin on the right side of the element, fifteen pixels of margin at the bottom and forty-five pixels of margin on the left.


Padding


As we saw from the box model illustration all elements in HTML have an area of padding that lies between the content area and the border. The syntax for padding is very similar to the syntax for margin.


Just like the margin property, padding has four separate properties that represent each side of the element.



  • padding-right

  • padding-bottom


As we saw from the margin short hand notation there are several ways to apply margin. The same holds true for padding also.


padding:10px;

When you set padding in this way we are telling the browser that we wish to have ten pixels of padding on each side of the element.


padding:10px 15px;

Using this we are telling the browser that we want ten pixels of padding on the top and the bottom of the element.


padding:10px 15px 17px;

This time around we are asking for ten pixels of padding at the top of the element, fifteen pixels of padding on both the left and the right sides and finally we request seventeen pixels of padding to the bottom of the element.


padding:10px 15px 17px 58px;

I’m sure you know the drill by now…ten pixels of padding on the top of the element, fifteen pixels of padding on the right of the element, seventeen pixels of padding on the bottom and fifty-eight pixels of padding on the left of the element.


As you can see padding and margin are conceptually similar. They add space to the element, the difference being the padding adds the space inside the element and margin adds space outside the element.


Border


Every element in HTML has a border. Just like the margin and padding there is an individual property for each side of the element.



  • border-right

  • border-bottom


The border also has some other properties, which are



  • border-width

  • The border style property takes the following values



    • dashed – a line of dashes

    • double – double border

    • ridge – a 3d ridged border

    • outset – a 3d outset border

    • hidden – a hidden border


    When we wish to set the properties of the border we need to specify which side of the element we are applying the border to and we need to specify which property we will be using.


    To further illustrate the border properties let’s throw together a quick example. In this example we will be setting different values for each side of the element.


    div {
    height:200px;
    width:200px;

    border-left-color: red;
    border-right-color: blue;
    border-bottom-color: yellow;
    border-top-color: green;

    border-left-style:solid;
    border-right-style:dashed;
    border-top-style:groove;
    border-bottom-style:inset;

    border-left-width:5px;
    border-right-width:15px;
    border-top-width:51px;
    border-bottom-width:23px;
    }

    As you can see we have set the width, style and colour properties for each side of the element. We have also supplied a height and width, this is just so the borders can be seen properly (there is no content in the div so without these properties being set the div won’t display properly)


    The output this code will produce will look like this (I know it’s horrible but it does allow us to use all the properties)


    Examples of border properties.

    As you can see the browser has done everything that we have asked of it, however we have had to resort to writing quite few lines of code to do so. As programmers we tend to be quite lazy and want everything done in the shortest and most concise way possible. Luckily for you, and me, the good folks that wrote the specs for CSS also do not want to write lines and lines of unnecessary code. So they came up with the border short hand property.


    By using the short hand border property we can set the border width, border colour and the border style in one go. However we still need to select each side separately if we want to apply different values to each side.


    To apply border properties to all sides of the element you will need to specify the border property then you need to feed it three values (in this order) border width, border style and border colour.


    The following example will give the element a fifteen pixel solid blue border all the way round.


    border:15px solid blue;

    A solid blue border

    If you wanted apply different values to each side, like we did before we looked at the short hand notation, then you need to specify each side of the element. Like so:


    div {
    height:200px;
    width:200px;

    border-left:5px solid red;
    border-right:15px dashed blue;
    border-bottom:25px inset yellow;
    border-top:51px groove green;
    }

    This will give the same output as we saw when we discussed the separate properties of border.


    An extremely ugly border but an effective demonstration.

    This brings an end to this section of HTML and CSS for beginners – part five. In this section we discussed the box model, margin, padding and borders. Next time we will be discussing positioning elements with CSS.


    << Back to HTML and CSS for beginners part 4

About Michael Griffiths

Web Developer and Social Media Coach

Comments