Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Margin Collapse

Top and bottom margins of elements may occasionally collapse into a singular margin, which equals the larger of the two margins. This behavior does not occur with left and right margins.

Consider the following example:

Example

Illustration of margin collapsing:

h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}

In the given example, the <h1> element has a bottom margin of 50px, while the <h2> element has a top margin set to 20px.

]Intuitively, one might expect the vertical margin between the <h1> and the <h2> to sum up to 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.

All CSS Margin Properties

Property	Description
margin	A single declaration shorthand for setting all margin properties.
margin-bottom	Specifies the margin at the bottom of an element.
margin-left	Specifies the margin at the left of an element
margin-right	Specifies the margin at the right of an element.
margin-top	Specifies the margin at the top of an element