Web Design & Development

[ Web Design & Development Topics ]

Cascading Style Sheets

CSS Margins

You can set margins around elements using these commands:

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin (this does all the margins)

Examples:

• h2 {margin: 20px}
• h1 {margin: 10px 2% -10px auto}

Lets try it: http://www.w3schools.com/css/css_margin.asp

Padding

Table cells

Using padding settings you can pecify the top, right, bottom, and left padding of table cells. You can also specify for all sides if you would prefer:

• padding
• padding-bottom
• padding-left
• padding-right
• padding-top

Sample:

<style type="text/css">
td {padding-top: 2cm}
</style>

Divs

Padding does not just have to be used on table cells. It can be used on div tags as well, so for example you could have something like this:

a.button:link, a.button:visited, a.button:hover, a.button:active
{background-color:#e1973c; padding:12px; color:#100901;}

a.button:hover {color: #0a0601; background-color:#cd7608; text-decoration:none;}

and then add it to a link with the class of 'button' like this:

<a href="dissertation.html" class="button">Dissertation</a>

and voila! you have a pseudo button: like this: Google