Scribd
Upload
532 views18 pages

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
532 views18 pages

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
  • Introduction to Box Model: Introduces the concept of the box model, explaining its role in sizing HTML elements using CSS.
  • Height and Width: Explains how height and width properties are applied to elements in CSS, focusing on default behaviors.
  • Border: Discusses the use of borders in CSS, showing examples of how to style and style elements with borders.
  • Border Style: Explains the different border styles available in CSS and demonstrates how to apply them.
  • Border Width and Color: Covers how to define the width and color of borders using various CSS properties.
  • Specifying Individual Sides: Shows how to apply different border widths to individual sides of an element.
  • Margin: Details how margins create space around elements and impact layout within the box model.
  • Padding: Explains the concept of padding and its role in creating space between an element's content and its border.
  • Margin and Padding: Discusses the properties shared by margins and padding, focusing on their transparency and definition.
  • Visualizing Margin and Padding: Illustrates the concepts of margin and padding using graphics to enhance understanding of space management.
  • Additive Height and Width: Describes how margins, borders, padding, and content together contribute to the total size of an element.
  • Width and Height Calculation: Outlines how to compute an element's actual size using CSS properties such as width, height, padding, and border.
  • Centering an Element: Provides methods to center elements horizontally in CSS, discussing potential challenges and solutions.
  • Box-Sizing: Explores the box-sizing property in CSS and its effect on element dimensions.
  • Measurements: Discusses units of measurement in CSS, differentiating between absolute and relative sizing techniques.
  • Example: Presents a practical example to apply knowledge of the box model and CSS properties discussed earlier.
  • Review: Summarizes key points about using the box model for web design, emphasizing margin, border, and padding.
  • Acknowledgements/Contributions: Credits contributors and provides licensing information for the materials used.

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