CSS Boxes and Display Properties

CSS Boxes

• Boxes in CSS are categorized as block or inline
• Block boxes display on new lines
• Inline boxes stay on the same line as other inline elements

Block Boxes

• Start on a new line
• Respect width and height properties
• Padding, margin, and border push other elements away if no explicit width is set, they stretch to fill their container

Inline Boxes

• Stay on the same line as other inline elements
• Width and height properties don't apply
• Top and bottom padding, margins, and borders won't push other elements away
• Left and right padding, margins, and borders will push other inline elements away

Display Property

• Used to change the display type of an element
• For example, changing the display type of a list item to block makes the item take up the full width of the line it is on

Box Dimensions

• By default, a box is sized just big enough to hold its contents
• Use width and height properties to set custom dimensions
• Possible units for box dimensions include pixels, rem, em, and percentages.

Limiting Dimensions

• min-width: Sets the smallest size a box can be when the window is narrow
• max-width: Limits how wide a box can get when the window is wide, keeping content readable, especially on small screens

Overflow Property

• Controls how content that is too large to fit inside a box is handled
• hidden: Hides extra content
• visible: Shows any extra content
• scroll: Adds a scrollbar
• auto: Adds a scrollbar if the content is too big to fit

Box Model

• content: The actual content inside the box (text or images)
• padding: The space between the content and the border
• border: The visible boundary around the box
• margin: The space outside the border

Padding

• The space between the box's content and its border
• Values can be set for each side (top, right, bottom, left) or combined into a single value
• padding: <value> <value> <value> <value> (top, right, bottom, left)
• padding: <top> <right-left> <bottom> (top, right/left, bottom)
• padding: <top-bottom> <right-left> (top-bottom, right-left)
• padding: <value> (equal padding on all sides)

Border

• The visible boundary around the box
• border-width: Sets the width of the border using units like px, em, rem, thin, medium, thick
• border-style: Determines the style of the border (e.g., solid, dashed, dotted)
• border-color: Sets the color of the border
• Shorthand property can be used to set all border properties in one line

Border Radius

• The corner radius property is used to round the corners of an element's border
• Can be set on all four corners separately or as a shorthand
• Shapes like circles and ellipses can be created using border radius

Margin

• The space outside the border of a box. It creates distance between the box and adjacent elements or the page's edge.
• Can be set for individual sides (top, right, bottom, left) or as a shorthand
• Individual values like: margin-top: 10px; margin-right: 20px;
• Shorthand values like: margin: 10px 20px 30px 40px; (top, right, bottom, left). Note that the order is still top, right, bottom, left.

Default Margin

• In many browsers, elements have default margin values. These values can vary between browsers.
• margin: 0 value often used to remove default margins on elements and avoid spacing inconsistencies across different browsers.

Aligning Content

• auto unit within margins can be used to distribute available space between elements, centering them.
• text-align: center can be used in order to center text inside an element, but this will not work for other content inside the container like Images.

Box Sizing

• box-sizing property controls how width, and height properties are calculated
• content-box: The default, where width/height only include content. Padding, border, and margin are excluded
• border-box: Width/height include padding, border, but not margin

Display Behavior

• display: block creates block-level elements, each starting on a new line, taking up the entire width available
• display: inline creates inline elements, which flow within a line horizontally. Width isn't fixed
• display: inline-block combines aspects of both, allowing width and height specifications, while staying on the same line.
• display: none makes the element invisible, but the space it occupied is removed.

Visibility

• To hide an element without affecting layout, the visibility property can be used.
• The element is hidden, but its space remains.
  • "hidden" hides the element but maintains space
  • "visible" shows the element

Box Shadows

• box-shadow: Creates a drop shadow effect around or inside an element
• Multiple shadows can be defined, each with offset, blur radius, color, and position.
• Use inset to place shadow inside the box.