The CSS Box Model explains the main structural aspects of HTML block Elements.
Most HTML blocks have default margins, but no default padding.
No margin or padding styles have been applied to the Paragraph (P) and Section Heading (h1, h2, ...) blocks below.
You can see that there is no padding between the text in the "content" parts of the blocks and the borders.
But you can clearly see the top/bottom margins of the blocks.
There are no line breaks between the blocks in the HTML code.
The vertical spacing is entirely created by the default top/bottom margins.
Default Paragraph Block (with only border added by CSS)
Default Paragraph Block (with only border added by CSS)
Default Section Header Block (with only border added by CSS)
Default Section Header Block (with only border added by CSS)
Div blocks have no default margins or padding, as you can see below.
Notice how the two div blocks below stack on top of each other with no space in between.
Default Div Block (with only border added by CSS)
Default Div Block (with only border added by CSS)
The following div blocks have styles applied to change the defaults.
In particular, the padding keeps the content away from the borders.
Div Block with Box Model Styles: padding, border, and margins.
Div Block with Box Model Styles: padding, border, and margins.