Scribd
Upload
287 views

Introcss - ppt.02.01 Box Model

Uploaded by

Luis Soriano
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
287 views

Introcss - ppt.02.01 Box Model

Uploaded by

Luis Soriano
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

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

You might also like