14
THINKING INSIDE THE BOX
Objectives
CSS Box model
Box dimensions
Padding
Borders
Outlines
Margins
Display roles
Drop shadows
The Parts of an Element Box
Every element is composed of 4 layers:
● the element's content
● the border around the element's content
● padding space between the content and border
(inside)
Box Sizing Models
box-sizing
Values: content-box, border-box
There are two methods for sizing an element box, specified with the
box-sizing attribute:
Content-box sizing (default)
Applies width and height values to the content box only
Border-box sizing
Applies width and height values to the border box (including the
padding and content)
Box Sizing Models Compared
Overflow
overflow
Values: visible, hidden, scroll, auto
Specifies what to do when content doesn’t fit in a sized element box:
Padding
padding, padding-top, padding-right,
padding-bottom, padding-left
Values: Length, percentage
An amount of space between the content area and the border (or the
space the border would be if one isn’t specified).
You can add padding to one side at a time, or on all sides with the
padding shorthand property.
Padding (cont’d)
blockquote {
padding-top: 2em;
padding-right: 4em;
padding-bottom: 2em;
padding-left: 4em;
background-color: #D098D4; /*light green*/
}
Shorthand padding Property
The padding property adds space around 1, 2, 3, or 4 sides of the
content using the clockwise top, right, bottom, left (TRouBLe) order:
padding: top right bottom left;
padding: 2em 4em 2em 4em;
(this shorthand produces the same result as the example on the
previous slide)
Borders
A border is a line drawn around the content area and its (optional)
padding.
The thickness of the border is included in the dimensions of the
element box.
You define style, width (thickness), and color for borders.
Borders can be applied to single sides or all around
Border Style
border-style,
border-top-style, border-right-style,
border-bottom-style, border-left-style
Values: none, solid, hidden,
dotted, dashed, double, groove,
ridge, inset, outset
NOTE: The default is none, so
if you don’t define a border
style, it won’t appear.
Border Style
border-style
The border-style shorthand uses the clockwise (TRouBLe) shorthand
order. The following rules have the same effect:
div#silly {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: dotted;
width: 300px;
height: 100px;
div#silly {
border-style: solid dashed double dotted;
}
Border Width
border-width,
border-top-width, border-right-width,
border-bottom-width, border-left-width
Values: Length, thin, medium, thick
The border-width shorthand uses the clockwise (TRouBLe) order:
div#help {
border-width: thin medium thick 12px;
border-style: solid;
width: 300px;
height: 100px;
NOTE: The border-style property is
required for the border to be rendered.
Border Color
border-color,
border-top-color, border-right-color,
border-bottom-color, border-left-color
Values: Color value (named or numeric)
The border-color properties override the color property:
div#special {
border-color: maroon aqua;
border-style: solid;
border-width: 6px;
width: 300px;
height: 100px;
NOTE: The border-style property is
required for the border to be rendered.
Border Radius (Rounded Corners)
border-radius
Values: 1, 2, 3, or 4 length or percentage values
• The border-radius property rounds off the corners of an element.
• The value is a length or percentage value reflecting the radius of the
curve.
• Providing one value makes all the corners the same.
• Four values are applied clockwise, starting from the top-left corner.
Border Radius (cont’d)
Margins
margin, margin-top, margin-right,
margin-bottom, margin-left
Values: Length, percentage
The margin is an amount of space added on the outside of the border.
They keep elements from bumping into one another or the edge of the
viewport.
The shorthand margin property works the same as the padding
shorthand. Values are applied clockwise (TRouBLe order) and are
repeated if fewer than 4 values are supplied.
Margins
A p#A {
(cont’d)
margin: 4em;
border: 2px solid red;
background: #e2f3f5;
B p#B {
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;
border: 2px solid red;
background: #e2f3f5;
C body {
margin: 0 20%;
border: 3px solid red;
background-color: #e2f3f5;
