Project One: Margin size and value

Something I have been unsure of when creating the code in CSS for a webpage is how to know what values you should use for the margins of your different elements and how you can work it out using your wireframe/mockup designed in illustrator. The answer is, there isn't really a way. Most of it is just guessing and putting a rough value not an exact one. However if you like everything to be exact like me you can draw lines/boxes on your illustrator file to find out the values. You would need to do this for atleast two sides. An example of this is shown below (in red).

Here is a link that explains margins a little more and shows you what order to write the values in. It also gives you a number of examples. http://www.w3.org/wiki/CSS/Training/padding_and_margin.

Another useful tip I learn't today was how to know what size to make your main container. Normally a PC computers screen size is 1920px wide. So you want your website to be smaller than this size so that you don't have to slide side to side all the time. In the Evoke arts festival example when made the website 960px wide. Note: This doesn't include the background.