[an error occurred while processing this directive]
Go to Bottom Nav - May 23, 2019 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

In the CSS box model, every element of your page in the body section is contained by a box that is comprised of content area, padding (area surrounding the content), border (area at the edge of the padding, may or may not be visible), and the margin (invisible area around the border). This box can be block level or inline and you can decide which if the selector's default doesn't suit your needs.


Margins may be set all at once or individually. margin: 10px; sets a ten pixel margin all around the element. margin: 5px 10px 15px 20px; sets the top, right, bottom, and left margins respectively. Equivalently, you may write margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px; for each individual margin.


Applying borders can make your content stand out. To make the border visible, you need to specify a "border-style." Below are examples of each border style with "border-width: 2px 5px 10px 15px;" for the top, right, bottom, and left respectively. For this example, I've used "display: inline;" so each div won't take up so much vertical space.

Notice that different browsers render borders differently...

Solid border
Dotted border
Dashed border
Doubled border
Groove border
Ridge border
Inset border
Outset border


Padding gives your content some breathing room or white space. The examples below have a solid black one pixel border and a ten pixel margin all around. The only differences are the values for padding.

A paragraph with no padding.

A paragraph with 20 pixels padding.

A paragraph with "padding:0px 150px 30px 50px" or variably as with border and margin properties.

Height, Width, Float, and Overflow

Here is an example of a 150x100 pixel div which floats to the right. The extra text and the property "overflow:auto" make scroll bars appear when needed.

You may specify the height and width of an element as well as whether it "floats" to the left or right, much as the align attribute works in your image tag. However, if you lock down both dimensions, you need to specify where the "overflow" text goes if it doesn't fit in the box.

Some Useful Links

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu