Box Model
- Display
- Box Model
- Border
- Margin
- Padding
- Width
- Height
- Border Radius
- Box Shadow
- Border Image
- Border Collapse
- Box Sizing
- Overflow
- Outline
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:
Block box
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
Output:
Lorem ipsum
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
Lorem ipsum
Shorthand and Longhand options
span {
border: 2px solid #000;
border-top: dotted;
border-right: outset;
border-bottom: dashed;
}
<span>Lorem ipsum</span>
Output:
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
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
| Shorthand | Longhand |
|-|-|
| padding
| padding-bottom
padding-left
padding-right
padding-top
|
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
Lorem ipsum
Lorem ipsum
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
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
Lorem ipsum
Shorthand and Longhand options
| Shorthand | Longhand |
|-|-|
| border-radius
| border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
|
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; | |
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 |