The Core Principle of Web Layouts

Web page layout follows a specific workflow:

1. Prepare the structural HTML elements, which are fundamentally rectangular containers.
2. Apply CSS styling to these containers and position them precisely on the page.
3. Populate the containers with content.

The essence of web layout is essentially arranging these containers using CSS rules.

Anatomy of the Box Model

In CSS, every HTML element can be visualized as a rectangular box. This model serves as a container for content and consists of four specific areas:

• Content: The actual text, images, or media inside the element.
• Padding: The clear space between the content and the border.
• Border: The perimeter surrounding the padding (if any) and content.
• Margin: The transparent outer space that separates the element from others.

Styling Borders

The border property configures the boundaries of an element. A border is defined by three properties: its width, its style, and its color.

Syntax:

border: border-width || border-style || border-color;

Property	Description
border-width	Sets the thickness of the border, typically in px.
border-style	Defines the line type: solid, dashed, or dotted.
border-color	Sets the color of the border.

Shorthand Example:

border: 2px dashed blue;

Targeted Borders: You can apply styles to a single side, which is useful for overrides due to CSS cascading.

border-bottom: 4px solid green;

Exercise: Create a container with dimensions of 200x200 pixels. Set the top border to red and the remaining borders to blue.

Table Border Collapse

When working with tables, the border-collapse property determines how cell borders interact.

Syntax:

border-collapse: collapse;

Setting this to collapse merges adjacent cell borders into a single line, preventing double borders.

Impact of Borders on Dimensions

Adding a border increases the total calculated size of the element. To maintain specific layout dimensions, use one of these methods:

1. Exclude the border width during the initial measurement of the design.
2. Subtract the border width from the defined width or height.

Example: If a box is 300px wide with a 5px border on each side, the content area effectively shrinks if the total width must remain 300px.

Padding Properties

padding controls the internal spacing between the content and the border.

Property	Description
padding-left	Internal space on the left.
padding-right	Internal space on the right.
padding-top	Internal space at the top.
padding-bottom	Internal space at the bottom.

Shorthand Notation:

Number of Values	Application Logic
1 value	Applies to all four sides.
2 values	1st for top/bottom, 2nd for left/right.
3 values	1st for top, 2nd for left/right, 3rd for bottom.
4 values	top, right, bottom, left (clockwise).

Adding padding generally increases the element's total size. To keep the visual size consistent with a design mockup, reduce the width or height by the added padding amount.

Exception: If an element has no explicitly defined width, adding padding will not cause the element to oevrflow its parent container.

Margin Properties

margin controls the external spacing, determining the distance between elements.

Property	Description
margin-left	External space on the left.
margin-right	External space on the right.
margin-top	External space at the top.
margin-bottom	External space at the bottom.

Centering Block Elements: To center a block-level container horizontally:

1. The element must have a fixed width.
2. Set the left and right margins to auto.

.container {
  width: 800px;
  margin: 0 auto;
}

Text vs. Container Alignment:

• Use text-align: center to center inline text or inline-block elements inside a container.
• Use margin: auto to center the container itself.

Image Handling:

• Inline Images (<img>): Their position is controlled by padding and margin properties.
• Background Images (background-image): Their position is controlled by the background-position property.

Margin Collapsing

Vetrical margins between block elements can sometimes merge (collapse) rather than add up.

Adjacent Sibling Collapse

When two sibling elements meet vertically, the bottom margin of the first and the top margin of the second will collapse. The resulting space will be equal to the larger of the two margins, not the sum.

Nested Element Collapse

If a parent element contains a child element, and the parent has no top border or padding, the parent's top margin may collapse with the child's top margin. The larger value prevails.

Fixes for Nested Collapse:

1. Apply a border-top to the parent.
2. Apply padding-top to the parent.
3. Add overflow: hidden to the parent.

Note: Floated, fixed, or absolutely positioned elements do not suffer from margin collapsing.

Normalizing Default Spacing

Browsers apply default margins and padding to many elements (like body, h1, p, ul). To ensure consistency, it is standard practice to reset these at the beginning of your CSS.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Optional: helps manage sizing */
}

Note on Inline Elements: For compatibility, inline elements should generally only have horizontal (left/right) padding and margins modified, not vertical ones, unless you change their display type to block or inline-block.