CSS CSS Layout Basics Page Layout with the Float Property The Float Challenge Solution

Richard Verbraak
Richard Verbraak
7,685 Points

Gutters in CSS

I think the concept of padding and margin is still not completely clear to me especially during this test.

I used margin instead of padding which made the columns drop all the way down and not side by side. Why won't the margin value work since it seperates the columns as well by creating gutters?

2 Answers

Linas Mackonis
Linas Mackonis
6,721 Points

Hi Richard,

The basic difference between the padding and margin is that margin creates the space in the outside of the element or the space that comes after the border of each element.

Meanwhile padding creates additional space in the inside of an element, which is between the content and the border of the element. Thus, if can affect the whole content of your layout respectively.

Hope that helps.

Diane Houghton
Diane Houghton
5,353 Points

Think of your content as an actual cardboard box with stuff in it. Padding goes inside the box, which takes up room and makes the stuff smaller, but the box is still the same. When you add margin, it goes outside the box, which pushes the other boxes next to it away. Hope this helps.