Skip to main content

Thinking In Boxes : The Basics Of Css Design

Every element in your webpage is a box: once you understand that, the process of laying out a CSS design becomes much more intuitive. The syntax for box markup is a straight inheritance from the earliest days of HTML, where the element names were used for table and then frame mark up. There are five parameters for each element: box width, box height, border, margin, and padding.
The diagram below shows you how these parameters relate to one another:


Figure 1: The Parameters of a Box Element

If you use a development environment like Firebug then you can inspect the box parameters visually, which lets you understand how the values are interacting:

 

Figure 2: Firebug's Box Model Layout Viewer

Note that in this tutorial we’ll talk about the box – the content container – and the element, which is the area enclosed by the border. The size of the element is calculated as follows: Element width= box width + left padding + right padding + left border + right border Element height = box height + top padding + bottom padding + top border + bottom border

Absolute vs Relative Positioning of Text Boxes: If you give your box an absolute position and don’t set a width, then the box width will be exactly as wide as it needs to be to hold the content. So if the box contains just one word, then the box is only as wide as that word. As the text grows, the box grows. The box will grow width-wise until it reaches the width of the parent element and then begin to wrap. The effect of this can be unpredictable as different browsers render text differently and the eventual size of the element will vary.

If your box has a relative or static position then the box behaves a little differently. In fact it behaves in two different ways depending on whether you set a width implicitly or explicitly.
If the box has no declared width it will default to 100% of the available space, but the padding will grow inwards. Say, for example, the parent element width is 450px, the border width is 0px and the padding value is 10px, then the width of the content box will only be 430px.

However, if you explicitly declare the width of the box to be 100% then the content box will be 450px wide. Padding will be added to the outside, and as a result the width of the element will be 470px in total (plus borders)

You may require the text box to be explicitly 100% of the parent element, yet you might want to have padding as well. Because the padding will be added to the “outside” of the element it will be too large to fit. Values can be hard coded in fixed-width environments, but in environments where there parent elements can be resized it’s impossible to do this elegantly. Some compromise needs to be found between defining the size of the content box and allowing for padding – your design will dictate what you do.

Doodling in the Margins: The margin isn’t part of the element, but it is the amount of space that is reserved between the element and other page elements. In order to get elements to line up on the page it is essential that you understand how margins work. Margins are always transparent and so their presence can only be deduced from the effect that they have on other page elements. To add to the complexity, the top, right, bottom, and left margin can be changed independently using separate properties. A visual layout browser like the one in Firebug can help you to understand where the margins extend to.

Margins can be made negative, essentially cancelling the white space between two elements. For example, if two elements are side-by-side and the left element has a right hand margin of 20px and the right element has a left hand margin of -20px the margin will be cancelled out and the elements will abut.

If two adjacent elements are of a similar type then only the larger of the two margins will be applied: that is if one text box with a bottom margin of 20px is above another text box with a top margin of 15px, the whitespace between them will be 20px, not 35px. This is true for all types of elements except headers and list items, whose margins are never overridden.

If you want to see the effect of the box elements on your page in the browser, simply add the following to your stylesheet:
* {border: 1px solid green !important; }

For a variety of css box layouts, try thenoodleincident’s set of boilerplate stylesheets.

Popular posts from this blog

A Super Funny Joke - The Boy And The Priest

A housewife takes a lover during the day, while her husband is at work. Unknown to her, her 9 year old son was hiding in the closet. Her husband came home unexpectedly, so she hid her lover in the closet. The boy now has company. Boy: Dark in here.. Man: Yes it is. Boy: I have a baseball. Man: That’s nice. Boy: Want to buy it? Man: No, thanks. Boy: My dad’s outside. Man: OK, how much? Boy: $250. In the next few weeks, it happens again that the boy and the mom’s lover are in the closet together. Boy: Dark in here. Man: Yes, it is. Boy: I have a baseball glove. Man: How much? Boy: $750. Man: Fine. A few days later, the father says to the boy, “Grab your glove. Let’s go outside and toss the baseball.” The boy say's, “I can’t. I sold them.” The father asks, “How much did you sell them for?” The son says, “$1,000.” The father says, “That’s terrible to overcharge your friends like that, that is way more than those two things cost. I’m going to

Locked Keys - Blonde Joke

A blonde walks into a gas station and says to the manager, "I have locked my keys in my car. Do you have a coat hanger or something I can stick through the window to unlock the door?" The manager gives the blonde a bent coat hanger. A few minutes later, he goes out to check on her. As her approaches the blonde working the hanger in the window, he notices another blonde inside the car, shouting "No, no! A little to the left."

Bon Appetit - Funny Joke

Santa was spending some of his hard-earned cash on a luxury cruise and was given a table with a Frenchman. At their first meal together, the Frenchman said, "Bon appetit!" "Santa Ji," said Santa. Before the next meal commenced the performance was repeated. "Bon appetit," said the Frenchman. "Santa Ji," replied Santa. After this continued for three days, Santa got fed up, and told a fellow traveller about it. "He tells me his name is Bon Appetit and I tell him my name is Santa, and then at the next meal, we start all over again." The fellow traveller laughed and explained to Santa that the Frenchman was not introducing himself and that 'Bon appetit' meant "Good appetite", or "I hope that you enjoy your meal!" Santa breathed a sigh of relief on receiving this information. Next morning, at breakfast, Santa greeted the Frenchman with a, "Bon appetite." The Frenchman nodded politely and said, "Sant