Your content isn't in there all by itself. CSS uses a box model around your content to easily allow for some neat presentational effects. The box model is about what you'd expect: a box is placed around any html element. But there's a couple extra layers for you to work with. Here's what those layers look like:
In this graphic, the white space with the text "The Box Model" represents the space taken up by just the text itself in some example HTML element (actually, a <p> element in this case). The green area immediately around it is the padding area. Following this is a black line that denotes the border around this HTML element. Finally, the blue area gives the margin area. The reason for having separate padding and margin areas is so that you can create different affects with any HTML element's border. Typically, no other HTML elements will enter any of these regions.
The CSS properties we need to change to affect this box model are the padding, border, and margin properties. In the most basic way to use them, you'll specifically set the values with the px or em units we used for font sizes. We can also specifically set the margin, padding, or border properties for the top, bottom, left, or right sides of an HTML element individually. Here's an example:
<html> <head> <title> Title of my webpage </title> <style type="text/css">p { border: 3px solid #007700; margin: 10px; padding-top: 2em; padding-left: 1em; padding-right: 0; background-color: #ff7777; }</style> </head> <body> <p> My first paragraph. My first paragraph. My first paragraph. </p> <p> My second paragraph. My second paragraph. My second paragraph. </p> </body> </html>
While the example above used only positive margin values, it's certainly possible to use negative margin values. This can create some interesting overlap effects between elements when done well.
You may notice that there's one extra property being changed in this code: background-color. This allowed the background color of those <p> elements to be set to a shade of red so that we could better see the effects of padding. This is the most commonly used background property. However, you can also use background-image to set an image as the background to an HTML element. For this the image's url is given as the value in the CSS rule.