All language subtitles for 0005 - CSS Box Model Tutorial for Beginners.en.clean

[Music]

hello and welcome hi i'm dave this

tutorial is part of a beginner css

series i'll be using the chrome web

browser the visual studio code editor

and the live server extension for visual

studio code to view the web page

there are links to these tools starter

code files and all resources in the

description below

let's move on to the css box model today

you'll learn that everything in css is a

box but before we finish i'll show you

how to turn a box into a circle if you

want to so let's get started on the left

i have visual studio code and i have the

code from the last tutorial we'll modify

that in just a second on the right i

have a basic web page once again with an

h1 header and a paragraph and i'm using

the live server extension so any changes

i make in the css and when i save the

file will immediately show then in the

web page okay so everything we have over

here except the h1 has got to go so i'm

going to delete everything above

and below

and leave the styles for the h1 and we

can now save and we see those changes so

our paragraph

text has gotten smaller

and everything else is pretty much the

same except we do now have the default

styles from the browser again and we'll

get back to that css reset in just a bit

but right now we want to look at this

box model and we've already drawn a box

by putting a border around our h1

element we can see this border here

defined with shorthand and we'll get

into what all of that means in just a

second too but what i want to do first

is drag

our visual studio code over as far as i

possibly can and give us some more room

in the browser because we're going to

open up dev tools so once you do that

you can press shift alt or i'm sorry not

shift alt it is control shift i believe

and the letter i

to open dev tools

and if that's not working then you

should be able to no that is going to

work it just took a second here on my

computer

and if that doesn't work you could right

click and choose inspect as well once

you have it open you may not have your

dev tools on the right and if you don't

you can click the three dots and choose

where it is docked i like to have mine

on the right and then you can select any

of the elements in the html here and you

see it flashing over on the web page

because it highlights what element

you've selected and i am in the elements

tab that you can choose as well

after that i am going to select that h1

so it's inside of our header element

here

and after i select it i've got h1 and

notice the colors changed on the web

page this is already showing us the box

model right here so what we have for the

orange is the margin and then we can

clearly see our border that we put in

with two pixels and it is dashed and

then inside of that we see green and

that is the padding and then inside of

that we see blue and that's actually the

content and now if we go down here where

we have a styles tab let's choose the

computed tab and we actually see the box

model inside of our dev tools so we can

highlight any aspect of this so i'll go

to the content first and now we only see

the blue highlighted on the web page and

that is our content and it's showing us

the actual size of the content in pixels

here as well and then we go to padding

which is the next layer the padding is

once again inside of the border and it

just wraps around our content it gives

some extra space inside of the border

gives our content a little room to

breathe if you will so here you can see

it's 24 pixels then we have our border

which it shows it as

1.993 pixels we set it to 2 pixels hey

close enough right and after the border

we have margin and you can see we didn't

set a margin so this margin is just

showing the space that is left after our

element is there so on top we have 32

pixels and then we have 32 pixels on the

bottom as well and that's probably just

because of the default of the h1 we

didn't set a margin on the right but we

do see a big margin over there and

that's just because we have set that 50

percent width on our h1 so it's not

taking up the full page space and what's

left is occupied by margin

so it's important that you remember how

to get here in dev tools we're on this

computed tab below and you always want

to be able to bring up the box model to

see exactly what's going on with your

elements after that it's also important

to just memorize the different layers of

the css box model so starting on the

inside we have content then we have

padding then we have border and finally

we have margin on the outside and now

concerning our h1 and the margin that i

have highlighted notice it's 32 pixels

actually

32.16 pixels and we didn't set that so

that's a default style on the h1 we've

got the h1 selected let's go back to the

styles tab instead of the computed tab

and we can see this if we scroll just a

little bit there's the styles we set and

then here are the default styles from

the browser this is a user agent style

sheet that's assigned by the browser and

here you can see they assigned some

margin settings here it's 0.67

em so that's essentially two-thirds now

if we remember about our units an e-m

responds to the font size of the element

and we set a font size of three rim

which would essentially be 48 pixels so

two-thirds of that is coming in right

around where we see it on our box model

here at

pixels so now that we know our font size

is impacting the default margin let's go

ahead and change our font size and of

course it will also change our padding

that we based on em units i'm going to

change this to

to rim if i can type here to rim and

save

and now things have changed notice our

margin got smaller it's

21.44 because our font size got smaller

and this is based on an em unit an m

as far as the browser is concerned so

once again it's still 0.67 em

but the actual size is smaller it's

21.44 pixels now changes like this can

be really hard to keep track of and so

that's why sometimes we just want to

reset the browser settings for all the

margins and all the padding and just

take control of them ourselves and

that's why we use a css reset and a very

basic css restart starts with the wild

card at the top and then we set margin

for all elements because remember this

wild card selects all elements so we set

the margin to zero

and we set the padding to zero

and we can save and now all of that

margin and padding that is set by

default is taken away and you can see

the body actually had a little bit of

margin set to it as well because now

we're right up to the edge of the body

here on our page and this border we set

around our h1

is right up to the edge of the page as

well and there's one more setting i

always put inside of the css reset and

that is box

dash sizing there we go

and now the default

is content box and if we save we won't

really notice a change here it didn't

really change anything because that is

the default so what the content box does

is it says okay the size that we're

setting is this for the content and the

content only it doesn't include

calculating the size of the padding or

of the border or of the margin at all so

instead of 50

i'm going to set an absolute width on

here so we can compare and i'll set this

to say

400 pixels and save now let's look over

here in our box and we can see the

content is 400 pixels but that doesn't

account for the padding what we have

here is not the 400 pixels we were

expecting we took up more space than

that but if we set this to border box

instead of content box

then we'll get what we expect and it's

much easier to calculate so now notice

our content over here is not 400 pixels

is 348

and then we can add in

24 pixels of padding on each side and

two pixels of border on each side and

then we can get our total of 400. so

what borderbox does is it really helps

us calculate the sizes that we are

assigning because it goes ahead and

includes the border and the padding it

does not include the margin the margin

is on the outside

of our css boxes that we create

whichever elements that we are styling

so the margin is not included in that

calculation however the rest is so the

border and the padding and the content

all add up to that 400 pixels that i set

right here okay now that we've broken

down how the border box setting works

and looked at the css box model let's go

ahead and close devtools and let's just

style our page a little bit with some of

these properties i'm going to resize the

page a little bit so we have some more

room for visual studio code over here on

the left i'll pull this over there we go

and now let's make some changes so one

thing i have thought about is our h1

right here has some settings i normally

probably wouldn't put on an h1 i'm just

more concerned with the font there but

the font size that would be assigned by

default is okay too so i'm going to get

rid of that and now these other settings

i would actually be more likely to put

on the container than i would on the h1

itself and the h1 is inside of a header

element so let's go ahead and save that

and it changed just a little bit but

that's okay i'm going to change these

ems back to rims because now i'm not

setting a font size on the header so i'm

going to use 1.5 rim here

and save and now we've got our padding

back to about where it was but now what

if i wanted to assign these same

settings to the container that our

paragraph is in and that's in the main

element so maybe i don't want this on

the header maybe i want to assign a

container class so i can provide these

same settings for more than one

container so i'm going to quickly go

over to the html

and in the html we'll set a class called

container on each of these elements so

we have the header element

and we'll set the class equal to

container

and i've got one extra

quote there there we go and now i'm just

going to copy this and i'll paste it

into our

main element as well

and save that and there we go so now

we've got dashes around both of these

boxes here let's go back to the css and

make these bigger so we can see them

better on the page right now i'm going

to get rid of this 100 pixel or 400

pixel width let's go ahead and let them

take up the full 100 percent for now

okay let's go ahead and add a font size

to the container and it will apply to

both of these differently but we'll set

it to 1.5

rim and save

now our fonts a little bit bigger but

notice how the edges of the border are

right up against the page so on the

outside of our box we can set a margin

and also set that to 1.5 ram and save

and now we have our two boxes and the

margin has pushed them away from the

edge the margin has also provided space

between the two boxes here and now that

we have a font size on our container we

could go ahead and switch this back to

ems and remember

one m one e m would be the same as the

font size so it would be equal to the

1.5 rim so if we make this change we

just change it to 1 m

and our sizing should stay the same and

it does if we change this to 1.5 it will

get bigger

yes and now we have more padding we

could add more margin by doing the same

if we want to so let's go ahead and do

that

and now let's go ahead

and experiment with the margin and the

padding because we don't have to have

the same setting on the top right bottom

and left and i did say that order

specifically for a reason because for

the margin we could just say margin

top and here let's go ahead and say 1.5

em and save

and look what happens to our other

margins the left and right margins are

gone and you can't really see that we

lost the margin on the bottom but we did

the only thing separating these

containers now is the margin on the top

so now let's go ahead and add some

margin on the right

and here we'll set this to 2em and save

so it's just a little bigger and now we

do have margin on the right but still no

margin on the bottom and no margin on

the left i'm going to press shift alt

and the down arrow

and now instead of the right i'm going

to switch this one to

bottom

and save and now we have some more

margin here on the bottom so the

separation between these two boxes got

bigger that's the only thing you could

really see right there

and now on the right let's go ahead and

switch i mean on the left let's go ahead

and switch this to two ems as well and

you can see we got the same thing as if

we just said

margin 2em except we wanted a margin on

top of 1.5 amp so there is shorthand for

this so i'm going to comment all four of

these out and i'll press shift alt and

the letter a to do that

there you can see a css comment so it

commented those out so right now there

will be no margin once again now the

boxes are next to each other no margin

on the left and right but our shorthand

is just saying margin and when i say

this 1.5

em

that applies it to top bottom

left and right and it actually goes in

the order top right bottom left so now

we could put in different settings with

the shorthand if we wanted to so 1.5 on

top

and then

2 m's on the right and the left and then

2 m's on the bottom and i can save

and that is the same thing as when we

had all four of these right here now if

i just wanted to have

1.5 on the top and the bottom and two on

the left and the right i could delete

this third setting right here

and that's what we get so now it will

take 1.5 and apply it to the top and the

bottom

and 2 and apply it to the right and the

left however you can provide all four

settings so we could go 3

and 4

and then we would have the shorthand

notice the left margin the final value

here is much larger twice as large

actually as the right margin and then

the bottom

is definitely larger than the top margin

because here you can see only the top

margin as it applies to the first

container and now you can see

the top margin and the bottom margin

here combined to create the space

between the two boxes now this same idea

for shorthand also applies to padding so

i will copy these actually cut them and

just go back to the one setting for

margins so that looks a little bit more

normal again but now let's apply the

same thing to the padding and we'll see

how that changes so now we have a much

larger left padding of four twice as

much as we have on the right

and then we have a larger bottom than we

do on top this is easier to see because

it's inside of our container and

remember if you're ever having a hard

time seeing all of this different white

space i guess i dragged visual studio

code i meant to grab the edge of chrome

here i'll pull this over

right click choose inspect

open up the dev tools again and we can

see all of this hidden white space much

clearer when we look at the box model so

once again in dev tools choosing the

computed tab but we also need to

highlight what we're going to look at so

i'm going to choose this main container

and now we can see the space as it's

applied here so here's the content

here's the padding and see we have 48

pixels on the right but 96 on the left

twice as much we have 36 on top but 72

on the bottom which is twice as much

also so we can definitely see that our

padding settings over here once i drag

this over are being applied as we

specified them in this shorthand okay

back to visual studio code i'm going to

resize chrome once again so we can see

our code better

dragging this over

dragging visual studio code back over

here there we go and we can do the same

thing you might expect with border

actually first worth discussing you can

just delete the two pixels

and then when we save it actually gets a

little thicker because the default is

more like three pixels for the size here

i'm going to delete this odd sizing for

the padding that i used just to

indicate the different

sides for the padding and we'll go back

to kind of a normal look here we've got

two containers and they have equal

padding and equal margin around them

these settings also apply to the

individual border sides so that means we

can say border dash top and here we

could say

5 pixels

solid and then i'll go ahead and press

shift alt and the down arrow and then

instead of border top i'll go ahead and

say border

right and i'll say

10 pixels and here i'll say dotted

and save

and now we can see we had some major

changes here and we didn't specify a

color so these settings

were to override what we had set with

shorthand above and so the default color

is black but we have a dotted right and

we have a solid top so we could have

specified different colors here as well

so we could say

green and then of course over here we

can say something different like

yellow

and save and now

that is ugly that definitely changed our

borders though so i'll switch that to

blue and save our eyes just a little bit

and if we wanted to specify these

individually we could even say border

top

width and then we wouldn't specify the

solid or green here so you can break out

each

individual setting as well so now you

can see we just changed the width of the

top one likewise instead of width

there's also border top let me switch

that there we go style and this is where

we're specifying

dotted or anything else here's ridge is

another value we'll save that and so now

the top is a little bit different it

looks pretty much like the solid setting

does and then of course there would be

border top

color

and we could turn this to any color we

want so i'll choose blue here as well

and now we have a dashed blue line

across the top of our border so so many

settings for the border when you break

them out individually we had border top

but then we also specified border top

width border top style border top color

and then of course you can do that

instead of for top you can do right

bottom and left as well

often because of this because there are

so many i'll delete this i just use the

shorthand i usually want my borders to

have the same width all the way around

so previously i'd had two pixels here

and then i chose dash let's choose a

different one here let's use

outset

and we'll save and we can see it changed

our frame around the box another one

that i like is called double

and i'll put a link to the border page

from mdn in the description and you can

see all of the different values there

let's make this larger so we can really

see

the double what it does here i'll save

and there you go we've got our double

lines now around each container while

we're covering border one other setting

to cover is outline outline is not part

of the box model because the difference

between it and the border is that it

doesn't take up space but you style

outline much like you would the border

so here i'm going to choose 5 pixels and

i'll choose solid

and then let's make the outline a

different color entirely let's go with

purple

and if i save this now we can see purple

wrapping outside of our border but again

the outline is not calculated because it

doesn't take up space so it's not

calculated into that box model equation

another property that the outline has

that is very handy

is outline dash offset so instead of

being right up against our box we can

say we want the offset to be 5 pixels

and save and see how we pushed it now 5

pixels further out from our border so

it's offset 5 pixels from the rest of

our box and something worth considering

sometimes is using a negative value so

if i put in negative 10 pixels

we'll now see the outside the outline

is inside of our box here and so let's

go ahead and change this some more so we

get it a little further inside maybe

even 20 pixels and save and we can

clearly see the outline is now inside of

our box model okay in the beginning i

promised to show how to turn a box into

a circle before we were finished so

let's do that i need to go back to the

file tree

and find our index html and hide the

file tree with ctrl b

and i just want to put a div down here

i'm going to keep it in the side of the

main element so i'll just type

div and then i want to give this div

a class and set this equal

to

there we go to circle

i still didn't spell circle right i'm

having a rough time today save there

we've got a div with the class of circle

okay we can close the html and now let's

style our circle class

so we'll start with circle definition

here for the class

and let's give the circle a background

color

of gold but we haven't given it any size

yet so let's say a width

of 100 pixels

and a height of 100 pixels

and that doesn't look like much of a

circle yet but it will let's go ahead

and add a border now of two pixels

we'll make this solid black

and now we see our border applied to our

square

and let's add an outline as well well we

need a new line for that outline

now the outline can be 2 pixels let's

say solid and let's go with red for now

so it'll match everything else a little

bit and stand out now let's give it an

offset also

and we'll make this 0.25 round

and save so yeah we've got just a little

space there now let's create some

separation from the other content and so

i'll just leave this at the top but i'll

make the margin

three rim

and save and now it's pushed itself away

but something we didn't cover with the

margin if you set the margin this

doesn't work for top and bottom but if

you set it for

left and right notice we've got three

ram for top and bottom now we can use

the keyword auto for left and right

and this will center it horizontally

that means in the middle left and right

so now we put what will be a circle our

gold square inside

of our main element and it's at the

center horizontally not vertically but

at least it is horizontally and now to

calculate our circle we essentially just

need to set one other border property

and we set it to half the value of the

width and the height so this border

property is called border radius i'll

put it right under border

and we'll set it first just so you can

see how it works let's set it to 20

pixels and you'll see what border radius

does look how it rounded the corners

of our square so now we have more like a

cool button kind of like you would see

there and we can continue to round that

but if we set it to 50 pixels which is

half of the width and half of the height

and save

we've now got a circle now there's

always more than one way to do things in

css and typically in programming in

general so if you've got other ways you

like to make circles in css go ahead and

leave those in the comments below but i

hope this has helped you learn about the

box model today so we have the content

on the inside then we have the padding

then we have the border and finally on

the outside we have the margin and when

we apply our basic css reset and we set

the box siding to border box the box

sizing to border box

then the calculation includes the

content the padding and the border

instead of just the content remember to

keep striving for progress over

perfection and a little progress every

day will go a very long way

please give this video a like if it's

helped you and thank you for watching

and subscribing you're helping my

channel grow

have a great day and let's write more

code together very soon