Css Box Model Cheat Sheet

Posted on by admin



Html

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

  1. 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.
  2. 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.
  3. 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.
Css Box Model Cheat Sheet

  • 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 shorthand

    • A 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

Cheat

    • Flows content together, fitting on the same line if possible.

    • margin, padding, widthdon’t work.

  • display: block

    • Takes up a whole line by itself.

    • margin, padding, widthdo work.

    • A hybrid between block & inline: fits on the same line, allows padding, width, etc.

  • display: none

    • Completely hide the element from the page.

    • Set to another display value to make it visible again.