Css Box Model Cheat Sheet Free
The Box Model
The CSS Box Model
Starting at the content and working out:
•
padding
— space between the content & box edge;background-color
fills behind this space.•
border
— line around the edge of the box.•
margin
— space outside the box, pushing other boxes away; can see through margin to what’s behind.
margin
&padding
can take 1–4 values.With 4 values, we start at the top and continue clockwise around the box.
The same system applies completely to
padding
A cheat sheet covering the CSS box model and associated properties. Written by Joe Levi Published December 31, 2008 June 1, 2016 Discussion 2 Comments on CSS Cheat Sheet Interactive CSS Box Model Understanding the CSS Box Model is one of the most fundamentally important aspects of CSS-based layouts, but to some it’s a complex concept to comprehend, while to the more experienced it’s a complicated beast to.
Box dimensions
- The complete CSS cheat sheet PDF and PNG includes the latest CSS3 tags and attributes. Perfect for beginners and free to download! Marquee-.: does it really belong to Box Model? Also, this CSS module is abandoned and deprecated in favor of CSS animations.
- CSS introduced to replace the line-by-line styling attributes. CSS executes at client-side on the browser; It is not a Programming language. Here we have provided the most common CSS cheat snippets which cover CSS gradient, background, button, font-family, border, radius, box and text-shadow generators, color picker and lots more.
- The cheat sheet is divided into the following categories: I know what you’re thinking “Gary, is that all?” Well, I’m keeping the written content to a minimum in this CSS guide (hard for me to do, I know) so that you can dive right in.
margin
Create space outside the box, pushing other boxes.
Target each side individually:
margin-top
,margin-right
,margin-bottom
,margin-left
Because margins are outside of a box they can actually have negative numbers.
Instead of pushing other boxes away, negative margins pull the box in a specific direction.
Will pull the box to the left by
5em
and can cause elements to overlap.
padding
Create space inside the box, pushing text away from the edge.
Target each side individually:
padding-top
,padding-right
,padding-bottom
,padding-left
Control the horizontal space of a box.
height
Controls the vertical space of a box.
Setting a height should be avoided at all costs.
Let the content inside the box dictate the height.
Make a box be at least a certain width, but can expand.
min-height
Make a box at least a certain height, but can expand.
This is infinitely better than just
height
Control how elements that break out the edges of the box are dealt with.
One of:
visible
,hidden
,scroll
,auto
Also contorl a single direction:
overflow-x
,overflow-y
calc()
Sometimes we can’t calculate a value ahead of time because it depends on something the browser knows but we don’t, e.g. adding
em
+px
together.Always have a space around the math operator!
Colours & borders
Set the colour of the text.
background-color
Set the colour of the box, behind the text.
Control the thickness of the stroke around a box.
border-color
Set the colour of the box stroke.
Set the visual appearance of the line.
Possible values:
solid
,dashed
,dotted
,double
,groove
,ridge
,inset
,outset
border
shorthandA short form version for setting the three border properties.
border:
•
border-width
•
border-style
•
border-color
Target each side of the box using
border-*
properties.border-top
,border-right
,border-bottom
,border-left
There’s also all the other singular properties like
border-top-width
,border-bottom-style
but I rarely use those.
border-radius
Make the corners of the box slightly rounded.
Control each side differently, start on top-left, go clockwise around.
Do ovals using a
/
to separate the different axes
Make the whole box and all its content semi-transparent.
A number between
0
&1
box-shadow
Create a drop-shadow behind the box.
Requires at least 3 values:
box-shadow:
•
horizontal-offset
•
vertical-offset
• optionally:
blur-radius
• optionally:
spread-radius
•
color
Separate each box-shadow with a comma.
outline
Like a border, but outside border, doesn’t take up space, will overlap surrounding elements.
outline-offset
— will push the outline away from the box edge.
Box sizing systems
Do not use
content-box
The default box calculation math puts the padding & border outside the width set in CSS.
This causes all sorts of confusing math solutions on responsive sites and just makes our coding life annoying.
Example calculation:
box-sizing: border-box
Always use
border-box
Simplifies the responsive math by making the width of a box, as set in CSS, not change by adding padding and border.
Always include this snipped of CSS!
Example calculation:
Display & layout
See the CSS layout cheat sheet for more detail.
Css Cheat Sheet
Flows content together, fitting on the same line if possible.
margin
,padding
,width
don’t work.
display: block
Takes up a whole line by itself.
margin
,padding
,width
do work.
A hybrid between
block
&inline
: fits on the same line, allowspadding
,width
, etc.
display: none
Completely hide the element from the page.
Set to another
display
value to make it visible again.