1. Computing

Discuss in my forum

CSS Lesson 4: Box Properties

CSS Short Course

By

Updated September 11, 2012

“Think Outside the Box” — this is a cliche in business, but in CSS you want to stay inside of it. All elements in HTML are inside an invisible rectangular box. This is called the element box. This box describes the amount of space the element and its properties occupy within the layout of the document.

Every element on the page will influence every other box. For example, if the first element is two inches tall, the element to follow it will be two inches from the top of the document. If the first element shrinks to one inch, the following element will then be one inch from the top of the document.

Things are Changing

With Cascading Style Sheets, web authors can now have more control over how their text is displayed on the page. Even to the extent of placing elements one on top of the other.

There are several CSS properties you can use to affect the shape and location of your box elements:

  • width
  • height
  • margin
  • margin-top, margin-left, margin-bottom, margin-right
  • padding
  • padding-top, padding-left, padding-bottom, padding-right

width

The CSS width property defines the width of the element. And that is the distance from the left inner edge of the element to the right inner edge. When you set the width on an element, you don't need to use tables to create text boxes.

Try typing this into your web page to create a paragraph with a narrow width.

<p style="width : 100px;">
This box is created using the width tag on the paragraph. 100 pixels wide.
</p>

If you have a hard time seeing the boundaries of the paragraph box (they are invisible), you can add a background color to the style, like you learned in part one of today's lesson.

style="width: 100px; background-color: #ccc;"

height

The CSS height property defines the height of an element. And that is the distance from the top inner edge of the element to the bottom inner edge. When you don't define the width, your element will only be as tall as the enclosed content requires it to be. By setting the height, you define the minimum height of the element, this means if there is more content than will fit in the height of your box, the box will be even taller.

Try adding this paragraph to your HTML, I added the background color already so that you can see the entire paragraph box.

<p style="height : 100px; background-color : #ccc;">
This paragraph was styled with CSS to be 100 pixels in height.
</p>

margin

Margins add space around the outer edge of the element. Using the CSS margin property, you can define all four margins to be the same. Or you can set all four separately with the same property:

margin : top right bottom left;

Or if you only want to set the margin on one specific side, you can use the margin-top, margin-left, margin-bottom, or margin-right properties. Put the following HTML into your web page to see the margin property in action:

<p style="background-color : #ccc; margin : 15px;">
This paragraph has a 15 pixel margin around it.
</p>

The margin property has a few other features to let you style the top and bottom the same and the left and right the same. Learn more about the margin property in the style sheets library.

padding

Padding adds space around the inner edge of the element. Using the CSS padding property, you can define all four sides to have the same padding, or you can set all four separately with the same property:

padding : top right bottom left;

And just like with the margin property, if you only want to set the padding on one specific side, you can use the padding-top, padding-left, padding-bottom, or padding-right properties.

When you put the following paragraph into your web page, compare it to the margin example above. You'll notice that when a paragraph has padding there is more background. When the paragraph has margins, there is less background.

<p style="background-color : #ccc; padding : 15px;">
This paragraph has a 15 pixel padding around it.
</p>

More About Box Properties

This has been just a quick overview of the CSS box properties. To really understand it, you should understand the entire CSS box model.

Next Page: An Introduction to CSS Positioning > 1, 2, 3

©2014 About.com. All rights reserved.