div
span
p
em
ol
ul
strong
article
abbr
details
Block Inline
There are a few properties that are crucial to how these boxes are sized:
padding
controls the spacing from the element’s content to its edge.
margin
specifies the spacing from the element’s edge to the elements around it, and can be negative to bring the element closer to other elements instead of farther.
border
allows you to specify a visible border. It’s placed outside the padding.
100%
? Does it match our intent?box-sizing: border-box
, but that has its issues tooinput
was on the same line and had a width!
width
, height
, margin
width
, height
, margin
have no effect.
width
, height
, margin-top
, margin-bottom
width
, height
, margin-top
, margin-bottom
have no effect.
width
, height
, margin
, although they are not entirely independentobject-fit
and object-position
help us adjust how the object contained within the replaced element should be positioned.
An element whose representation is outside the scope of CSS
div
h1
h2
h3
h4
h5
h6
p
body
html
a
span
strong
em
mark
code
cite
abbr
button
input
textarea
select
img
video
audio
iframe
canvas
option
object
embed
white-space
property changes white space processing rules.head
or style
are boxes too!display: none
from the User Agent stylesheet, which hides the element and removes it from normal flow.hidden
attributedisplay: none
to elements you want to hide.width: 400px;
width: 50%;
width: 400px;
width: 400px;
0
, the unit is optionalcap
ch
em
ex
ic
lh
rem
rlh
vh
vw
vi
vb
vmin
vmax
px
cm
mm
Q
in
pc
pt
%
refers to a different thing depending on the property. Look it up on a case-by-case basis!em
is relative the current font sizerem
is relative to the current font size of the html
elementch
represents the width of the "0" glyph in the current font.
This is useful in monospaced fonts where every character has the same width.vw
is a percentage of the viewport width (100vw
= viewport width)vh
is a percentage of the viewport height (100vh
= viewport height)font-size
).calc
allows us to perform calculations with different units. The type returned depends on the units that participate in the calculation.min
, clamp
and max
allow us to create upper and lower bounds for our values, and can participate in calc()
expressions too.min
can be used inside calc
and vice versa.width: 50%;
Each property defines whether percentages are allowed and what they represent
margin-left: 10%;
margin-top: 10%;
border: .3em dotted steelblue;
outline: .3em auto steelblue;
margin: auto;
overflow: auto;
inherit
initial
unset
revert
opacity: [num];
transform: rotate([angle]deg);
background-color: hsl([hue], 100%, 40%);
background:
url(img/chocolate-mousse.png) center / cover,
linear-gradient(teal [stop]%, gold);
background:
conic-gradient(teal [stop]%, gold);
background
font
border
text-decoration
display
color
padding
white-space
margin
text-shadow
box-sizing
outline
Inherited Not inherited
border: .3em dotted steelblue;
border: dotted .3em steelblue;
border: steelblue .3em dotted;
What happens if we swap the order of these two declarations? Why??
padding: .2em .5em .1em .5em
;background: url(foo.png) 50% 50% / 100% auto no-repeat gold;
background: gold no-repeat 50% 50% / 100% auto url(foo.png);
background: url(cat.jpg)
0 10% / 100% 100%
no-repeat
content-box border-box
fixed;
background-image: url(cat.jpg);
background-position: 0 10%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-origin: content-box;
background-clip: border-box;
background-attachment: fixed;