The Box Model Explained First, lets start with some simple paragraph - - PowerPoint PPT Presentation

▶
the box model explained
SMART_READER_LITE
LIVE PREVIEW

The Box Model Explained First, lets start with some simple paragraph - - PowerPoint PPT Presentation

Jan 11, 2023 116 likes •342 views

The Box Model Explained First, lets start with some simple paragraph text Next we will add a background color to <p> to see how it renders. So lets set the width to 50%. Now we can see how a background image works. To illustrate

slide-1
SLIDE 1

First, let’s start with some simple paragraph text…

The Box Model Explained

slide-2
SLIDE 2
slide-3
SLIDE 3

Next we will add a background color to <p> to see how it renders.

slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6

So let’s set the width to 50%.

slide-7
SLIDE 7
slide-8
SLIDE 8

Now we can see how a background image works.

slide-9
SLIDE 9
slide-10
SLIDE 10

To illustrate how these layers stack….

slide-11
SLIDE 11

Visualization of CSS Element Depth top: “p” element middle: background-image bottom: background-color

slide-12
SLIDE 12

Now that we have explored the layers of a CSS element, we can take a look how it expands outward.

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15

We can extend our visual edge of the element out a little bit further by adding a border. The border is literally the edge of the element’s boundary.

slide-16
SLIDE 16
slide-17
SLIDE 17

Ideally, an element like this one would also need margins added so that is does not hug the edges

  • f other elements.

In this example, the <p> element is hugging the left edge of its parent element, the <body>.

slide-18
SLIDE 18
slide-19
SLIDE 19

10% 10% auto auto The browser subtracts the cumulative set width of <p> from the parent’s width and then divides it in half to automatically assign left and right margins with the “auto” value.

slide-20
SLIDE 20

Notice, however, that after added padding and borders, we are far off from our original goal of achieving an overall 50% width. 70% + 4px border ~15% ~15%

slide-21
SLIDE 21

It is now safe to design for modern browsers using the CSS3 property, box-sizing. The example property above indicates that the element’s box model will be resized so that padding and border will be calculated to fit within the specified “width” of the element. It basically makes the math a lot easier.

box-sizing: border-box;

slide-22
SLIDE 22

25% 25% 50%