Box Model

Understanding Horizontal vs Vertical / XY

Properties

• Box Model: margin, padding, border, fill-area (the area that gets painted when we set background color), height, width, and box-sizing: border-box border-radius to give roundness

• Collapsing Margins happens when we set margin in Y axis. Means when two elements are given margins in vertical axis then only the bigger one gets applied

Padding/Margin Short-hands

• The clockwise shorthand: padding: top right bottom left;

• 3 Value shorthand: padding: top left/right bottom;

• 2 Value shorthand: padding: top/bottom left/right;

Dimensions

• Dimensions: height, width. If the height is fixed and content grows more then the height then the content overflows.

• We can control the overflow behaviour using the overflow properties

• overflow-x, overflow-y, overflow: hidden/scroll/auto (which adapts)

• min-height, min-width, max-height, max-width can help us with such issues

Background

.square {
	background-color: orange;
	background-image: url("");
	background-size: cover/contain;
	object-fit: cover/contain;
	background-position: X Y;
	background-repeat: no-repeat/repeat;
	background-attachment: scroll/fixed;
}

• Shorthand: background: color image repeat attachment position;

Gradients

• Gradients are transition from one color to another. We see a lot of gradients in Nature

• There are three main types of gradients in CSS: linear, radial and conic

• We can use online tools to create gradients such as Codioful or SheCodes

body {
	background-image: linear-gradient(to right, #000, #eee);
}

Margin Top Issue

<div class="container">
	<header>
	</header>
</div>