code icon

CSCI 1720

Intermediate Web

× INDEX
ANIMATION BACKGROUND BORDER BOX COLUMN COLORS FONT LIST POSITIONING PSEUDO TRANSITIONS TEXT
☰

Box

Property

Values

display
none | inline | block | inline-block | flex | inline-flex | grid | inline-grid | contents | list-item |run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption
float
left | right | none
clear
left | right | both | none
height
none | length
max-height
none | length
max-width
none | length
min-height
none | length
min-width
none | length
width
none | auto | length
margin
margin-top
margin-right
margin-bottom
margin-left
margin-top
auto | length
margin-right
auto | length
margin-bottom
auto | length
margin-left
auto | length
padding
padding-top
padding-right
padding-bottom
padding-left
padding-top
length
padding-right
length
padding-bottom
length
padding-left
length
overflow
visible | hidden | scroll | auto | no-display | no-content overflow-x | overflow-y
overflow-style
auto | marquee-line | marqueeblock
overflow-x
visible | hidden | scroll | auto | no-display | no-content
overflow-y
visible | hidden | scroll | auto | no-display | no-content
visibility
visible | hidden | collapse
Learn More





The CSS Box Model is a very important concept that allows you to style the elements on a page and make the page layout and appearance more effective. Think of the box as a series of nested boxes: box model Each of the values - padding, border, and margin - can be modified

You can also modify the display characteristics of the entire box