Griffiths web design based in Royston, Hertfordshire, United Kingdom

 

HTML and CSS for beginners – Part five

Author:   Michael Griffiths

Date created:   02 December 2016

[postpic=part5.jpg class=img-responsive title=HTML and CSS for beginners - part five alt=HTML and CSS for beginners - part five style=][/postpic] [url=http://www.griffithswebdesign.com/blog/post/39][b][l]<< Back to HTML and CSS for beginners part 4[/l][/b][/url] [hdmd]The box model[/hdmd] [l]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.)[/l] [l]Below is an image which illustrates the box model in all its simplistic glory.[/l] [postpic=boxmodel.jpg class=img-responsive center-block title=The box model alt=This is the css box model. Get to know it and get to love it style=][/postpic] [l]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. [/l] [l]For example if you had the following in your CSS:[/l] [code]div { width:200px; height:250px; padding:10px; border:solid #000000 5px; margin:15px; } [/code] [l]The width of the div would be: [/l] [l]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).[/l] [l]The height of the div would be:[/l] [l]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).[/l] [hdsm]Box sizing[/hdsm] [l]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.[/l] [l]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.[/l] [l][b]Box sizing can take one of four values:[/b][/l] [unord] [item][b]content-box -[/b] This is the default setting, which makes the height and width css properties include only the content area.[/item] [item][b]border-box -[/b] The height and width css properties will now include the padding and the border of the element but not the margin.[/item] [item][b]initial -[/b]This will set the box-sizing property to its default. (Not supported in IE)[/item] [item][b]inherit -[/b]The element will inherit the property from its parent element.[/item] [/unord] [hdsm]Margin[/hdsm] [l]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.[/l] [l]There are four separate properties for margin, one for each side of an element.[/l] [unord] [item]margin-left[/item] [item]margin-right[/item] [item]margin-top[/item] [item]margin-bottom[/item] [/unord] [l]As you may have noticed I have not used those properties in the examples. I used a short hand version.[/l] [code]margin:10px;[/code] [l]This tells the browser that you want 10 pixels of margin on each side of the elements.[/l] [code]margin:10px 45px;[/code] [l]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.[/l] [code]margin:10px 12px 45px;[/code] [l]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.[/l] [code]margin:10px 12px 15px 45px;[/code] [l]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.[/l] [hdsm]Padding[/hdsm] [l]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.[/l] [l]Just like the margin property, padding has four separate properties that represent each side of the element.[/l] [unord] [item]padding-left[/item] [item]padding-right[/item] [item]padding-top[/item] [item]padding-bottom[/item] [/unord] [l]As we saw from the margin short hand notation there are several ways to apply margin. The same holds true for padding also.[/l] [code]padding:10px;[/code] [l]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.[/l] [code]padding:10px 15px;[/code] [l]Using this we are telling the browser that we want ten pixels of padding on the top and the bottom of the element.[/l] [code]padding:10px 15px 17px;[/code] [l]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.[/l] [code]padding:10px 15px 17px 58px;[/code] [l]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.[/l] [l]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.[/l] [hdsm]Border[/hdsm] [l]Every element in HTML has a border. Just like the margin and padding there is an individual property for each side of the element.[/l] [unord] [item]border-left[/item] [item]border-right[/item] [item]border-top[/item] [item]border-bottom[/item] [/unord] [l]The border also has some other properties, which are[/l] [unord] [item]border-style[/item] [item]border-width[/item] [item]border-color[/item] [/unord] [l]The border style property takes the following values[/l] [unord] [item]dotted - a dotted line[/item] [item]dashed – a line of dashes[/item] [item]solid – a solid line[/item] [item]double – double border[/item] [item]groove – a 3d grooved border[/item] [item]ridge – a 3d ridged border[/item] [item]inset – a 3d inset border[/item] [item]outset – a 3d outset border[/item] [item]none – no border[/item] [item]hidden – a hidden border[/item] [/unord] [l]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. [/l] [l]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.[/l] [code]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; }[/code] [l]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)[/l] [l]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)[/l] [postpic=borders.jpg class=img-responsive center-block title=A border example alt=Examples of border properties. style=][/postpic] [l]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.[/l] [l]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.[/l] [l]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.[/l] [l]The following example will give the element a fifteen pixel solid blue border all the way round.[/l] [code]border:15px solid blue;[/code] [postpic=solidblue.jpg class=img-responsive center-block title=Solid blue border alt=A solid blue border style=][/postpic] [l]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:[/l] [code]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; }[/code] [l]This will give the same output as we saw when we discussed the separate properties of border.[/l] [postpic=borders.jpg class=img-responsive center-block title=The output from our border declarations. alt=An extremely ugly border but an effective demonstration. style=][/postpic] [l]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.[/l] [url=http://www.griffithswebdesign.com/blog/post/39][b][l]<< Back to HTML and CSS for beginners part 4[/l][/b][/url]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.

Comments

Please feel free to leave a comment below:






 
Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page