From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Margin collapse and inline spacing

Margin collapse and inline spacing

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Margin collapse and inline spacing

“

- [Instructor] Now that we've covered how to use the box model properties, let's go over a couple of box model quirks and how to manage them, starting with Margin Collapsing. When two elements containing margin space appear one after another, the bottom margin of the first element and the top margin of the second element occupy the same space. Let's look at an example on CodePen. We'll start by taking a look at the two paragraphs, which are also block elements. I've added background colors to make it easier to see the default spacing. Let's say you wanna remove the space in between the two paragraphs. Inside of Block 1, let's un-comment the margin-bottom style. Set to zero to remove the space from the bottom of the first paragraph. It looks like there's been no change, but remember, this space is also occupied by the top margin in the second paragraph, so let's remove that margin space, which is using the Block…

Contents