CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

Boxes

Display type

Display types

The Box Model

Margin — space outside the border
Border — a 'frame' between padding and margin
Padding — space between content and border
Content — where text and images appear
 
 
 
 
 

Example

<p>
     To bring the spirit of the Caribbean to
     your party, why not serve Mojitos? Sweet 
     but cool, they're sure to get you in 
     touch with your Latin side.
<p>
p {
    margin: 1em;
    border: 0.0625em solid black;
    padding: 2em;
    width: 30em;
}

The content

Padding

Background colours and images

Borders

Rounded corners on borders

Box shadows

Margin