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-left
properties.
#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:
Using shorthand notations
Try to memorize the following, as they'll apply to properties other than just padding.
- 4 values
- Top, left, bottom, right (clockwise).
- 3 values
- Top, left-right, bottom.
- 2 values
- Top-bottom, left-right.
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.
Centering an element
To horizontally center an element relative to its parent container, specify auto
as the left and right margin
values.
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.
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:
solid
dotted
dashed
double
groove
ridge
inset
outet
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
.
thin
medium
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.
Specifying a specific corner
If you'd like to specify specific a specific corner, use:border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
The shorthand for these is from border-radius
.
- One value specifies all corners.
- Two values specify the top-left/bottom-right, and top-right/bottom-left.
- Three values specify top-left, top-right/bottom-left, and bottom-right.
Creating an Ellipse
To create an ellipse, specify a width and height, then give two unequal values for the border-radius, separated by a forward slash (/).
#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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales. Nullam quis magna vestibulum, accumsan nulla vitae, lobortis diam.
Visible
This overflow is set to visible, meaning the text just goes out of its containing box like it runs the place.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales.
Hidden
This overflow is set to hidden. Notice that the text just cuts off.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales. Nullam quis magna vestibulum, accumsan nulla vitae, lobortis diam.
Auto
This overflow is set to auto, which causes overflowing content to be clipped with a scroll-bar added.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales. Nullam quis magna vestibulum, accumsan nulla vitae, lobortis diam.
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;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales. Nullam quis magna vestibulum, accumsan nulla vitae, lobortis diam.
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;
}
supercalifragilisticexpialidocious
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;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales. Nullam quis magna vestibulum, accumsan nulla vitae, lobortis diam.