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

Fonte: MDN

Inline box

display-inline

/codes/css/box-model/display-inline/index.html

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

/codes/css/box-model/display-inline/index.html

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

Referências: Inline elements | MDN

Block box

display-block

/codes/css/box-model/display-block/index.html

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

/codes/css/box-model/display-block/index.html

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

Referências: Block-level elements | MDN

Inline-block box

display-inline-block

/codes/css/box-model/display-inline-block/index.html

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

/codes/css/box-model/display-inline-block/index.html

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

/codes/css/box-model/display-inline-block/css/style.css

ul li {
  display: inline-block;
}

/codes/css/box-model/display-inline-block/css/style.css

ul li {
  display: inline-block;
}

Border

MDN:

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

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

Valores

/* style */
border: solid;
 
/* width | style */
border: 2px dotted;
 
/* style | color */
border: outset #f33;
 
/* width | style | color */
border: medium dashed green;

Valores

/* style */
border: solid;
 
/* width | style */
border: 2px dotted;
 
/* style | color */
border: outset #f33;
 
/* width | style | color */
border: medium dashed green;

Shorthand:

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`

Border:

border

/codes/css/box-model/border/index.html

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

/codes/css/box-model/border/index.html

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

/codes/css/box-model/border/css/style.css

html.dark * {
  border-color: #fff !important;
}
 
#first {
  border: 2px dotted #000;
}
 
#last {
  border: 5px solid #000;
}

/codes/css/box-model/border/css/style.css

html.dark * {
  border-color: #fff !important;
}
 
#first {
  border: 2px dotted #000;
}
 
#last {
  border: 5px solid #000;
}

Estilo:

border-style

/codes/css/box-model/border-style/index.html

<p>Lorem ipsum</p>

/codes/css/box-model/border-style/index.html

<p>Lorem ipsum</p>

/codes/css/box-model/border-style/css/style.css

html.dark * {
  border-color: #fff !important;
}
 
p {
  border: 2px solid #000;
  border-top: dotted;
  border-right: outset;
  border-bottom: dashed;
}

/codes/css/box-model/border-style/css/style.css

html.dark * {
  border-color: #fff !important;
}
 
p {
  border: 2px solid #000;
  border-top: dotted;
  border-right: outset;
  border-bottom: dashed;
}

Margin

MDN

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

Valores

/* 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;

Valores

/* 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;

Shorthand:

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

margin-block:

margin-block

/codes/css/box-model/margin-block/index.html

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

/codes/css/box-model/margin-block/index.html

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

/codes/css/box-model/margin-block/css/style.css

html.dark * {
  border-color: #fff !important;
}
 
.margin {
  border: 5px solid #000;
  margin: 3rem;
}

/codes/css/box-model/margin-block/css/style.css

html.dark * {
  border-color: #fff !important;
}
 
.margin {
  border: 5px solid #000;
  margin: 3rem;
}

margin-inline:

margin-inline

/codes/css/box-model/margin-inline/index.html

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

/codes/css/box-model/margin-inline/index.html

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

/codes/css/box-model/margin-inline/css/style.css

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

/codes/css/box-model/margin-inline/css/style.css

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

Padding

MDN

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

Valores

/* 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;

Valores

/* 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;

Shorthand:

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

padding-block:

padding-block

/codes/css/box-model/padding-block/index.html

<p>Lorem ipsum</p>

/codes/css/box-model/padding-block/index.html

<p>Lorem ipsum</p>

/codes/css/box-model/padding-block/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  border: 5px solid #000;
  padding: 3rem;
}

/codes/css/box-model/padding-block/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  border: 5px solid #000;
  padding: 3rem;
}

padding-inline:

padding-inline

/codes/css/box-model/padding-inline/index.html

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

/codes/css/box-model/padding-inline/index.html

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

/codes/css/box-model/padding-inline/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  margin-top: 2rem;
}
 
span {
  border: 2px solid #000;
  padding-left: 20px;
  padding-right: 1em;
  padding-top: 1em;
}

/codes/css/box-model/padding-inline/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  margin-top: 2rem;
}
 
span {
  border: 2px solid #000;
  padding-left: 20px;
  padding-right: 1em;
  padding-top: 1em;
}

Width

MDN

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

Valores

/* <length> values */
width: 300px;
width: 25em;
 
/* <percentage> value */
width: 75%;

Valores

/* <length> values */
width: 300px;
width: 25em;
 
/* <percentage> value */
width: 75%;

Exemplo:

width

/codes/css/box-model/width/index.html

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

/codes/css/box-model/width/index.html

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

/codes/css/box-model/width/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  border: 5px solid #000;
}
 
.w_400 {
  width: 400px;
}
 
@media (max-width: 640px) {
  .w_400 {
    width: 40%;
  }
}
 
.m_auto {
  margin: auto;
}
 
.ml_auto {
  margin-left: auto;
}

/codes/css/box-model/width/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  border: 5px solid #000;
}
 
.w_400 {
  width: 400px;
}
 
@media (max-width: 640px) {
  .w_400 {
    width: 40%;
  }
}
 
.m_auto {
  margin: auto;
}
 
.ml_auto {
  margin-left: auto;
}

min-width e max-width

min-width

/codes/css/box-model/min-width/index.html

<p>Lorem ipsum</p>

/codes/css/box-model/min-width/index.html

<p>Lorem ipsum</p>

/codes/css/box-model/min-width/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  border: 5px solid #000;
  width: 40%;
  min-width: 200px;
}

/codes/css/box-model/min-width/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  border: 5px solid #000;
  width: 40%;
  min-width: 200px;
}

Height

MDN

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

Valores

/* <length> values */
height: 300px;
height: 25em;
 
/* <percentage> value */
height: 75%;

Valores

/* <length> values */
height: 300px;
height: 25em;
 
/* <percentage> value */
height: 75%;

Exemplo:

height

/codes/css/box-model/height/index.html

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

/codes/css/box-model/height/index.html

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

/codes/css/box-model/height/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  border: 5px solid #000;
}
 
.h_100 {
  height: 100px;
}

/codes/css/box-model/height/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
p {
  border: 5px solid #000;
}
 
.h_100 {
  height: 100px;
}

Border Radius

MDN

Value: <length-percentage>4 [ / <length-percentage>4 ]?

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

Valores

/* 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;

Valores

/* 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;

Shorthand:

Shorthand	Longhand
`border-radius`	`border-top-left-radius` `border-top-right-radius` `border-bottom-right-radius` `border-bottom-left-radius`

Shorthand

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;

Shorthand

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;

Exemplo:

border-radius

/codes/css/box-model/border-radius/index.html

<div>
  <div class="card p-1 m-05 border rounded">Rounded</div>
  <div class="card p-1 m-05 border rounded-md">Rounded MD</div>
  <div class="card p-1 m-05 border rounded-full">Rounded Full</div>
</div>

/codes/css/box-model/border-radius/index.html

<div>
  <div class="card p-1 m-05 border rounded">Rounded</div>
  <div class="card p-1 m-05 border rounded-md">Rounded MD</div>
  <div class="card p-1 m-05 border rounded-full">Rounded Full</div>
</div>

/codes/css/box-model/border-radius/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
.card {
  display: inline-block;
  text-align: center;
}
 
@media (max-width: 640px) {
  .card {
    display: block;
  }
}
 
.m-05 {
  margin: 0.5rem;
}
 
.p-1 {
  padding: 1rem;
}
 
.p-2 {
  padding: 2rem;
}
 
.border {
  border: 1px solid #000;
}
 
.rounded {
  border-radius: 0.25rem; /* 4px */
}
 
.rounded-md {
  border-radius: 0.375rem; /* 6px */
}
 
.rounded-full {
  border-radius: 99999px;
}

/codes/css/box-model/border-radius/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
.card {
  display: inline-block;
  text-align: center;
}
 
@media (max-width: 640px) {
  .card {
    display: block;
  }
}
 
.m-05 {
  margin: 0.5rem;
}
 
.p-1 {
  padding: 1rem;
}
 
.p-2 {
  padding: 2rem;
}
 
.border {
  border: 1px solid #000;
}
 
.rounded {
  border-radius: 0.25rem; /* 4px */
}
 
.rounded-md {
  border-radius: 0.375rem; /* 6px */
}
 
.rounded-full {
  border-radius: 99999px;
}

Box Shadow

MDN

Value: none | <shadow>

<shadow> = inset? && <length>4 && <color>?

Valores

/* 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;

Valores

/* 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;

Exemplo:

box-shadow

/codes/css/box-model/box-shadow/index.html

<div>
  <div class="card p-1 m-05 bg-gray-100 shadow-sm">Shadow SM</div>
  <div class="card p-1 m-05 bg-gray-100 shadow">Shadow</div>
  <div class="card p-1 m-05 bg-gray-100 shadow-md">Shadow MD</div>
  <div class="card p-1 m-05 bg-gray-100 shadow-lg">Shadow LG</div>
</div>

/codes/css/box-model/box-shadow/index.html

<div>
  <div class="card p-1 m-05 bg-gray-100 shadow-sm">Shadow SM</div>
  <div class="card p-1 m-05 bg-gray-100 shadow">Shadow</div>
  <div class="card p-1 m-05 bg-gray-100 shadow-md">Shadow MD</div>
  <div class="card p-1 m-05 bg-gray-100 shadow-lg">Shadow LG</div>
</div>

/codes/css/box-model/box-shadow/css/style.css

body {
  background-color: white;
}
 
.bg-gray-100 {
  background-color: #f3f4f6;
}
 
.color-black {
  color: black;
}
 
.card {
  display: inline-block;
  text-align: center;
}
 
@media (max-width: 640px) {
  .card {
    display: block;
  }
}
 
.m-05 {
  margin: 0.5rem;
}
 
.p-1 {
  padding: 1rem;
}
 
.p-2 {
  padding: 2rem;
}
 
.shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
 
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
 
.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
 
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/codes/css/box-model/box-shadow/css/style.css

body {
  background-color: white;
}
 
.bg-gray-100 {
  background-color: #f3f4f6;
}
 
.color-black {
  color: black;
}
 
.card {
  display: inline-block;
  text-align: center;
}
 
@media (max-width: 640px) {
  .card {
    display: block;
  }
}
 
.m-05 {
  margin: 0.5rem;
}
 
.p-1 {
  padding: 1rem;
}
 
.p-2 {
  padding: 2rem;
}
 
.shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
 
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
 
.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
 
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

Referências:

Gerador de Box Shadow

Border Collapse

MDN

Value: collapse | separate

Valores

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

Valores

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

Exemplo:

border-collapse

/codes/css/box-model/border-collapse/index.html

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

/codes/css/box-model/border-collapse/index.html

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

/codes/css/box-model/border-collapse/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
.separate {
  border-collapse: separate;
  border-spacing: 0.5rem;
}
 
.collapse {
  border-collapse: collapse;
}
 
td {
  border: 1px solid #000;
}

/codes/css/box-model/border-collapse/css/style.css

* {
  border-color: var(--color-primary) !important;
}
 
.separate {
  border-collapse: separate;
  border-spacing: 0.5rem;
}
 
.collapse {
  border-collapse: collapse;
}
 
td {
  border: 1px solid #000;
}

Box Sizing

Fonte: MDN

Value: content-box | border-box

Valores

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

Valores

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

Exemplos:

Style	Preview
box-sizing: content-box; (222px: c-200, p-10, b-1)	Lorem ipsum dolor amet, consectetur.
box-sizing: border-box; (200px: c-178, p-10, b-1)	Lorem ipsum dolor amet, consectetur.

Overflow

MDN

Value: visible | hidden | clip | scroll | auto

Valores

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

Valores

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

Exemplo:

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

MDN

Value: [ <outline-color> || <outline-style> || <outline-width> ]

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

Valores

/* style */
outline: solid;
 
/* color | style */
outline: #f66 dashed;
 
/* style | width */
outline: inset thick;
 
/* color | style | width */
outline: green solid 3px;

Valores

/* style */
outline: solid;
 
/* color | style */
outline: #f66 dashed;
 
/* style | width */
outline: inset thick;
 
/* color | style | width */
outline: green solid 3px;

Exemplo:

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

References

Editar esta página