Box Model

This cheat sheet dipicts the Box Model and different attributes associated to edit and revies for a clear more consise website.

Width & Height

p { height: 80px; width: 240px;}

width and height: The width and height of the content area.

Border

p.content-header { height: 80px; width: 240px; border: 3px solid coral; border-radius: 5px;}

Border is a line that surrounds an element, like a frame around a painting. Borders can be set with a specific width, style, and color:

• width—The thickness of the border. A border’s thickness can be set in pixels or with one of the following keywords: thin, medium, or thick.
• style—The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid.
• color—The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.
• radius—The corners of an element’s border box with the border-radius property.

Padding

p.content-header { border: 3px solid coral; padding: 10px;}

The amount of space between the content area and the border.If you want to be more specific about the amount of padding on each side of a box’s content, you can use the following properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

Minimum and Maximum Height & Width

p { min-width: 300px; max-width: 600px;}

Minimum and Maximum Height and Width: Because a web page can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size.

• min-width/height—this property ensures a minimum width of an element’s box.
• max-width/height—this property ensures a maximum width of an element’s box.

Overflow

p { overflow: scroll; }

Overflow property controls what happens to content that spills, or overflows, outside its box. The most commonly used values are:

• hidden—when set to this value, any content that overflows will be hidden from view.
• scroll—when set to this value, a scrollbar will be added to the element’s box so that the rest of the content can be viewed by scrolling.
• visible—when set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.

Visibility

p { visibility: hidden; }

Visibility: elements can be hidden from view with the visibility property. The visibility property can be set to one of the following values:

• hidden — hides an element.
• visible — displays an element.
• collapse — collapses an element.