web analytics

Working with HTML5 and CSS3

@2021-02-28 16:51:58

Collapsing margins

Vertical margins on different elements that touch each other (thus have no content, padding, or borders separating them) will collapse, forming a single margin that is equal to the greater of the adjoining margins. This does not happen on horizontal margins (left and right), only vertical (top and bottom).

To illustrate, take the following HTML:

<h2>Collapsing Margins</h2>

<p>Example text.</p>

And the following CSS:

h2 {
  margin: 0 0 20px 0;

p {
  margin: 10px 0 0 0;

In this example, the h2 element is given a bottom margin of 20px. The paragraph element, which immediately follows it in the source, has a top margin set at 10px.

Common sense would seem to suggest that the vertical margin thickness between the h2 and the paragraph would be a total of 30px (20px + 10px). But due to margin collapse, the actual thickness ends up being 20px. 

@2021-02-28 17:21:20

Margins of inline-block boxes do not collapse (not even with their in-flow children).

If you change the display of the block elements (such as h2 and p) to a value of inline-block, then the margins will collapse as you are expecting.

@2021-03-15 20:33:50

HTML Version History

The following table summarizes some of the different versions of HTML that have been implemented over the years.

Version Date Description
HTML 1.0 1989 The first public version of HTML
HTML 2.0 1995 HTML version that added interactive elements including web forms
HTML 3.2 1997 HTML version that provided additional support for web tables and expanded the options for interactive form elements and a scripting language
HTML 4.01 1999 HTML version that added support for style sheets to give web designers greater control over page layout and appearance, and provided support for multimedia elements such as audio and video
XHTML 1.0 200 A reformulation of HTML 4.01 using the XML markup language in order to provide enforceable standards for HTML content and to allow HTML to interact with other XML languages
XHTML 2.0 discontinued in 2009 The follow-up version to XHTML 1.1 designed to fix some of the problems inherent in HTML 4.01 syntax
HTML 5.0 2012 HTML version providing support for mobile design, semantic page elements, column layout, form validation, offline storage, and enhanced multimedia
HTML 5.2 2017 The current version of HTML 5


@2021-03-15 20:59:28

Adding a Comment to an HTML Document

To insert a comment anywhere within your HTML document, enter

<!-- comment -->

where comment is the text of the HTML comment.

A comment can be spread across several lines as long as the comment begins with <!-- and ends with -->.


You must Sign In to comment on this topic.

© 2022 Digcode.com