INTRODUCTION
02.0 Box Model TO CSS
1
Box Model
Sizing your elements
INTRODUCTION
02.0 Box Model TO CSS
1
Height and Width
• The default width of inline
elements is the content
• Elements that are not inline can
take width and height properties –
we saw this in the Display lecture.
INTRODUCTION
02.0 Box Model TO CSS
1
Border
• Any element can have a border
around it
• border property specifies style,
width, and color
• The border style MUST be specified
INTRODUCTION
02.0 Box Model TO CSS
1
Border-style
• none, dotted, dashed, solid,
double, groove, ridge, inset,
outset, hidden
INTRODUCTION
02.0 Box Model TO CSS
1
Border width and color
• Width
• Set in pixels or thin, medium, or
large
• Color
• Name - “blue”
• RGB – rgb(0,0,255)
• hex - #0000FF
• transparent
INTRODUCTION
02.0 Box Model TO CSS
1
Specifying Individual Sides
INTRODUCTION
02.0 Box Model TO CSS
1
Margin
• Margin is additional space outside
your border – between you and
neighbor
• Positive margin
• element moves right/down
• Negative margin
• element moves left/upward
INTRODUCTION
02.0 Box Model TO CSS
1
Padding
• Padding is additional space
between the element and its
border.
• Positive padding
• border moves outward from element
• Negative padding
• border moves over the element
INTRODUCTION
02.0 Box Model TO CSS
1
Margin and Padding
• Neither takes a color
(transparent)
• Can also be defined in 1 - 4
values like border
INTRODUCTION
02.0 Box Model TO CSS
1
padding
The empty space between the
start of the element and the
start of the text
margin
The space between the Here is my text
edge of the screen and
the element
INTRODUCTION
02.0 Box Model TO CSS
1
Additive Height and Width
Here is my text
margin+ border = actual width
+ padding+ width
INTRODUCTION
02.0 Box Model TO CSS
1
What is the width and height?
width = 132px:
height = 82:
INTRODUCTION
02.0 Box Model TO CSS
1
Centering an Element
• To horizontally center an element use:
– margin: 0 auto;
• But…
– The element must display: block
– The element must not float
– The element must not have a fixed or absolute position
– The element must have a width that is not auto
INTRODUCTION
02.0 Box Model TO CSS
1
box-sizing
• box-sizing takes some of the
“math” out
• Options:
• content-box: default additive
• border-box: width takes content,
padding, and border into
consideration
INTRODUCTION
02.0 Box Model TO CSS
1
Measurements
• Absolute – set to a specific size
– px, mm, cm, pt, ….
• Fluid – sets size relative to surrounding
elements
• %, vw, vh
• em (for font): 1em is current size, .75 is 75% of the
current size
• rem (for font): 1rem is current size of root element
INTRODUCTION
02.0 Box Model TO CSS
1
Example
INTRODUCTION
02.0 Box Model TO CSS
1
Review
• Design sketches should be done with
box model (margin, border, padding,
content) in mind.
• Use box-model to reduce complexity
• Margin must always be considered
• Use fluid sizes for best viewing
INTRODUCTION
02.0 Box Model TO CSS
1
Acknowledgements/Contributions
These slides are Copyright 2015- Colleen van Lent as
part of http://www.intro-webdesign.com/ and made
available under a Creative Commons Attribution Non-
Commercial 4.0 License. Please maintain this last slide
in all copies of the document to comply with the
attribution requirements of the license. If you make a
change, feel free to add your name and organization to
the list of contributors on this page as you republish
the materials.
Initial Development: Colleen van Lent , University of
Michigan School of Information
