Box Model

Display
Box Model
Border
Margin
Padding
Width
Height
Border Radius
Box Shadow
Border Image
Border Collapse
Box Sizing
Overflow
Outline

Box Model
Fonte: MDN

Display

Display	Flow	Margin, Border, Padding	Height	Width
Inline	surrounding text without creating line breaks before	Ok
Block	stacked upon other boxes	Ok	Ok	Ok
Inline-block	surrounding text without creating line breaks before	Ok	Ok	Ok
none	turns off the display of an element

Inline box

<span>Lorem ipsum</span>
<span>dolor</span>

Output:

Lorem ipsum dolor

Block box

<p>Lorem ipsum</p>
<p>Lorem ipsum</p>

Output:

Lorem ipsum

Inline-block box

ul li {
  display: inline-block;
}

<ul>
  <li>Lorem ipsum</li>
  <li>dolor</li>
</ul>

Output:

Lorem ipsum
dolor

Border

Value: <br-width> || <br-style> || <color>

<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Syntax

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

Example

#first {
  border: 2px dotted #000;
}

#last {
  border: 5px solid #000;
}

<p id="first">Lorem ipsum</p>
<p id="last">Lorem ipsum</p>

Output:

Lorem ipsum

Shorthand and Longhand options

Shorthand	Longhand
`border`	`border-width` `border-style` `border-color`
`border-top`	`border-top-width` `border-top-style` `border-top-color`
`border-bottom`	`border-bottom-width` `border-bottom-style` `border-bottom-color`
`border-right`	`border-right-width` `border-right-style` `border-right-color`
`border-left`	`border-left-width` `border-left-style` `border-left-color`
`border-width`	`border-top-width` `border-right-width` `border-bottom-width` `border-left-width`
`border-style`	`border-top-style` `border-right-style` `border-bottom-style` `border-left-style`
`border-color`	`border-top-color` `border-right-color` `border-bottom-color` `border-left-color`

span {
  border: 2px solid #000;
  border-top: dotted;
  border-right: outset;
  border-bottom: dashed;
}

<span>Lorem ipsum</span>

Output:

Lorem ipsum

Margin

Value: [ <length> | <percentage> | auto ]{1,4}

Syntax

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em; 

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

Example

.margin {
  border: 5px solid #000;
  margin: 3rem;
}

<p>Lorem ipsum</p>
<p class="margin">Lorem ipsum</p>

Output:

Lorem ipsum

Shorthand and Longhand options

Shorthand	Longhand
`margin`	`margin-bottom` `margin-left` `margin-right` `margin-top`

span {
  border: 2px solid #000;
  margin-left: 20px;
  margin-right: 1em;
}

<p>Lorem <span>ipsum</span> dolor.</p>

Output:

Lorem ipsum dolor.

Padding

Value: [ <length> | <percentage> ]{1,4}

Syntax

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

Example

p {
  border: 5px solid #000;
  padding: 3rem;
}

<p>Lorem ipsum</p>

Output:

Lorem ipsum

Shorthand and Longhand options

span {
  border: 2px solid #000;
  padding-left: 20px;
  padding-right: 1em;
  padding-top: 1em;
}

<p>Lorem <span>ipsum</span> dolor.</p>

Output:

Lorem ipsum dolor.

Width

Value: [ <length> | <percentage> | auto ]

Syntax

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

Example

p {
  border: 5px solid #000;
}

.w_400 {
  width: 400px;
}

.m_auto {
  margin: auto;
}

.ml_auto {
  margin-left: auto;
}

<p>Lorem ipsum</p>
<p class="w_400">Lorem ipsum</p>
<p class="w_400 m_auto">Lorem ipsum</p>
<p class="w_400 ml_auto">Lorem ipsum</p>

Output:

Lorem ipsum

`min-width` and `max-width`

p {
  border: 5px solid #000;
  width: 40%;
  min-width: 200px;
}

<p>Lorem ipsum</p>

Output:

Lorem ipsum

Height

Value: [ <length> | <percentage> | auto ]

Syntax

/* <length> values */
height: 300px;
height: 25em;

/* <percentage> value */
height: 75%;

Example

p {
  border: 5px solid #000;
}

.h_100 {
  height: 100px;
}

<p>Lorem ipsum</p>
<p></p>
<p class="h_100">Lorem ipsum</p>

Output:

Lorem ipsum

Border Radius

Value: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

<length-percentage> = <length> | <percentage>

Syntax

/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* (first radius values) / radius */
border-radius: 10px 5% / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

Example

p {
  text-align: center;
  border: 5px solid #000;
  padding: .5rem;
  width: 200px;
}

.br_10 {
  border-radius: 10px;
}

.br_20_10 {
  border-radius: 20px 10px;
}

<p class="br_10">Lorem ipsum</p>
<p class="br_20_10">Lorem ipsum</p>

Output:

Lorem ipsum

Shorthand and Longhand options

border-radius: 1em/5em;

/* ... is equivalent to: */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* ... is equivalent to: */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Box Shadow

Value: none | <shadow>

<shadow> = inset? && <length>{2,4} && <color>?

Syntax

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Example

p {
  text-align: center;
  border: 5px solid #000;
  padding: .5rem;
  width: 200px;
}

.bs_short {
  box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.6);
}

<p class="bs_short">Lorem ipsum</p>

Output:

Lorem ipsum

Border Image

Value: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width>? / <border-image-outset> ]? || <border-image-repeat>

Syntax

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

Example

Style	Preview
border-image: linear-gradient(red, blue) 7;	Lorem ipsum dolor
border-image: linear-gradient(red, blue) 7 / 5px;	Lorem ipsum dolor

Shorthand and Longhand options

Shorthand	Longhand
`border-image`	`border-image-source` `border-image-slice` `border-image-width` `border-image-outset` `border-image-repeat`

Border Collapse

Value: collapse | separate

Syntax

/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

Example

table {
  width: 317px;
}

.separate {
  border-collapse: separate;
  border-spacing: 2px;
}

.collapse {
  border-collapse: collapse;
}

tr {
  border: 1px solid #000;
}

<table class="separate">
  <tbody>
    <tr>
      <td>Item 1.1</td>
      <td>Item 1.2</td>
      <td>Item 1.3</td>
    </tr>
    <tr>
      <td>Item 2.1</td>
      <td>Item 2.2</td>
      <td>Item 2.3</td>
    </tr>
  </tbody>
</table>

<table class="collapse">
  <tbody>
    <tr>
      <td>Item 1.1</td>
      <td>Item 1.2</td>
      <td>Item 1.3</td>
    </tr>
    <tr>
      <td>Item 2.1</td>
      <td>Item 2.2</td>
      <td>Item 2.3</td>
    </tr>
  </tbody>
</table>

Output:

Item 1.1	Item 1.2	Item 1.3
Item 2.1	Item 2.2	Item 2.3

Item 1.1	Item 1.2	Item 1.3
Item 2.1	Item 2.2	Item 2.3

Box Sizing

Fonte: MDN

Value: content-box | border-box

Syntax

/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

Example

Style	Preview
box-sizing: content-box;	Lorem ipsum dolor
box-sizing: border-box;	Lorem ipsum dolor

Overflow

Value: visible | hidden | clip | scroll | auto

Syntax

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

Example

Style	Preview
overflow: visible;	Lorem ipsum dolor amet, consectetur.
overflow: hidden;	Lorem ipsum dolor amet, consectetur.
overflow: scroll;	Lorem ipsum dolor amet, consectetur.
overflow: auto;	Lorem ipsum dolor amet, consectetur.

Outline

Value: [ <outline-color> || <outline-style> || <outline-width> ]
<outline-color> = <color>
<outline-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<outline-width> = \| thin \| medium \| thick

Syntax

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

Example

Style	Preview
outline: solid;	Lorem ipsum dolor
outline: #f66 dashed;	Lorem ipsum dolor
outline: green solid 3px;	Lorem ipsum dolor

CSS Guide

Box Model

Inline box

Block box

Inline-block box

Syntax

Example

Shorthand and Longhand options

Syntax

Example

Shorthand and Longhand options

Syntax

Example

Shorthand and Longhand options

Syntax

Example

min-width and max-width

Syntax

Example

Syntax

Example

Shorthand and Longhand options

Syntax

Example

Syntax

Example

Shorthand and Longhand options

Syntax

Example

Syntax

Example

Syntax

Example

Syntax

Example

References

`min-width` and `max-width`