CSS 3: Boxes

Introduction to Boxes

When learning CSS, it's easy become intimidated by layout schemes. However, if you think of every element as a box, things get much simpler! So keep in mind that each element is nothing more than a box with some content contained within.

This section will teach you about the CSS box model, which which is format of how CSS interprets every element on its page.

The CSS Box Model

The Box Model

The CSS Box Model is a very important concept used to space out elements. The Box model is made out of three main components - the content, padding and margin.

Content

The element within each containing box.

Padding

The spacing between the content and borderline.

Margin

The space outside the borderline.

The border is also part of this model, but it is defined as part of the content.

To visualize how this works, think of how items are packaged.

• You have your raw item (the content).
• Then you pad it with packing peanuts, bubble wrap, etc.
• Then you have your box, which serves as a border to the outside world.
• Lastly, we have our margin, is the space from the borderline to other elements.

That's it! Just think of all visual element on the page as a box and things will look much simpler.

Applying Padding and Margin

Padding

To apply a padding, use the padding-top,padding-right,padding-bottom, andpadding-leftproperties.

#sample {
  padding-top: 10px;
  padding-right: 12px;
  padding-bottom: 10px;
  padding-left: 12px;
} 

We can use the shorthand padding to group these values together. This way, we can specify the top, right, bottom, left in one go!

The following code specifies the top, right, bottom and left paddings, respectively.

#sample {
  padding: 10px 12px 10px 12px;
} 

If we only specified two values, the first value specifies the top and bottom values, while the second value sepcifies the left and right values.

#sample {
  padding: 10px 12px;
} 

We can also place three values, which will specify the top, left and right, and bottom.

#sample {
  padding: 10px 12px 10px;
} 

Thus, all the above examples would give a box similar to this:

Notice the area in between the content and its border - that's the padding being applied.

Without the padding, here's what it would look like:

Margin

Just like padding, we can specify: margin-top, margin-right, margin-bottom, and margin-left.

We can also use the shorthand notation margin to specify all these in one go.

div #sample {
  padding: 10px 12px 10px;
  margin: 40px auto;
} 

Notice all that area around the border. That's the margin!

Boxes

You may find the need to create a surrounding box around an element for better manipulation.

Creating a Box

To create a box in HTML, we used either <div> or <span> tags.

Recall that that <div> is a block-level element, while span is an inline-element. This means that <div> will take up the entire line, pushing its surrounding content above or below it, while span inserts itself within the line.

We can set the dimensions of this box in CSS with the height and width properties.

Choosing the Appropriate Units

To set the length and heigh values, we must specify a unit. The most common units include pixels, percentages or ems.

Just in time to review our CSS lengths!

• Pixels are popular because they allow developers to accurately control their size.
• Percentages are relative to the size of the browser window, or the box's containing box. This can be useful especially if you want a fluid layout, and want your page size to be relative to how stretched out the browser window is.
• If you use ems, the size is based on the text within the box. This is useful for scaling up in case the user increases the text size of his or her browser.

Ems are getting more popular, as developers need to account for different sized screens.

Setting a Maximum Dimension

You can limit the width or height with themin-width, andmax-width properties. These properties are useful in case your element contains text. You want to avoid your lines of text being too wide, as you having the user move from screen to screen can tire out his or her eyes!

Borders

Since every element is contained within a box, we can apply borders to just about anything!

Border Styles

To specify the type of border that should appear around an element, we use the border-style property. Values can be:

Border Width

The border-width property sets the width of the border (surprise, surprise). We can specify an actual unit, or we can give it the predefined value thin, medium or thick.

The most commonly use units are pixels.

To specify specific edges on the border we can use border-top-width, border-right-width, border-bottom-width, andborder-left-width.

Border Color

To set the border color, we use the border-color property. You can specify any of the four color options: RGB, hex codes, a predefined color name or HSL.

To specify a specific edge, use border-top-color, border-right-color, border-bottom-color, andborder-left-color

Shorthand Notation

You can also use the ultimate border shorthand notation border to specifyborder-width, border-color, and border-style.

p {
  border: 2px red solid;
}

Here is a paragraph with a red, solid, 2px border.

Box Border Effects box-shadow

Just like how we can apply a shadow on text, we can also apply a shadow on a box.

Box Shadow

To add a shadow around a box, we can use the box-shadow property.

There are six values that we must pass it, in order:

Horizontal offset

How far the shadow should be off to the right.

Vertical offset

How far the shadow should below the box edge.

Blur

To blur our shadow, we specify our third value, or the blur-radius.

The higher the value, the more blurry our shadow becomes.

Spread distance

The higher the value, the larger the shadow.

Color

Lastly, we may specify a color, the default being black.

Inner Shadow (optional)

To add an inner shadow, we insert the value "inset".

The following code will produce the Sample Box below:

#box {
  box-shadow: 2px 4px 7px 2px blue;
  margin: 10px;
  padding: 10px;
}

Border Radius border-radius

Border Radius

Boxes that have straight corners are often unappealing to the eye. To make a more smooth, rounded corner, we can use the border-radius property.

We specify a unit length for the radius - the larger this is, the more circular your corners become.

#oval {
  width: 200px;
  height: 100px;
  border-radius: 100px / 50px;
  background: blue;
  margin: 10px auto;
}

Box Sizing

The default selection for a CSS box is just the box's content, without the padding and border. Consequently, if you define the height and width, it'll only pertain to the box's content area.

If you'd like to specify that the content includes the padding and border, we use the box-sizing property with a border-box value. The default value is content-box.

#box1, #box2 {
  border: 1px solid black;
  border-radius: 10px;
  text-align: center;
  padding: 10px;
  height: 50%;
  width: 50%;
  margin: 10px auto;
}
  
#box1 {
  box-sizing: content-box;
}
  
#box2 {
  box-sizing: border-box;
} 

Notice how the first box is bigger, since the height applied only applies to the content area.

Handling Element Overflow

The overflow property

You can tell CSS how to handle elements that are too large to be contained within its parent container.

We use the propertyoverflow, and the values can be set to hidden, visible, scroll, auto.

#sample {
  width: 18em;
  height: 7em;
  margin: 0 auto 5px;
  border: 2px black solid;
  border-radius: 5px;
  padding: 0.5em;
  overflow: scroll;   /* how container will handle overflow */
}

Scroll

This overflow is set to scroll, with the overflow text clipped.

Visible

This overflow is set to visible, meaning the text just goes out of its containing box like it runs the place.

Hidden

This overflow is set to hidden. Notice that the text just cuts off.

Auto

This overflow is set to auto, which causes overflowing content to be clipped with a scroll-bar added.

Specifying a dimension for overflow

If you'd like to handle just the horizontal or vertical overflow, we can use theoverflow-x andoverflow-y properties.

p {
  overflow-x: hidden;
}div

Wrappingwhite-space, word-wrap, ellipsis

Keeping no breaks

You can specify a white-space property with nowrap to not have text pushed down to the next line.

#sample {
  width: 18em;
  height: 3em;
  margin: 0 auto 5px;
  border: 2px black solid;
  border-radius: 5px;
  padding: 0.5em;
  overflow: auto;
  white-space: nowrap;
}

Word Wrap

To wrap words around, setword-wrap to break-word

#sample {
  width: 7em;
  height: 3em;
  margin: 0 auto 5px;
  border: 2px black solid;
  border-radius: 5px;
  padding: 0.5em;
  overflow: auto;
  word-wrap: break-word;
} 

Ellipsis (...)

If we want our text to look more elegant, we can set an ellipsis for the property text-overflow.

For our overflow property, use a value of hidden.

/* Containing element */
#ellipsis {
  height: 2.5em;
}
/* Element containing text */
#ellipsis p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}