Skip to Content
CSS Display and Positioning
Block Display

Some elements are not displayed in the same line as the content around them. These are called block-level elements. These elements fill the entire width of the page by default, but their width property can also be set. Unless otherwise specified, they are the height necessary to accommodate their content.

Elements that are block-level by default include all levels of heading elements (<h1> through <h6>), <p>, <div> and <footer>. For a complete list of block level elements, visit the MDN documentation.

strong { display: block; }

In the example above, all <strong> elements will be displayed on their own line, with no content directly on either side of them even though their contents may not fill the width of most computer screens.



In index.html, add a <footer> element at the bottom of the document, right above the closing body tag.


Nothing changed! That’s because the <footer> element is empty. Add an <h3> element inside of the footer that says “Thanks for taking our survey!”


To improve the appearance of the web page, set the height of the footer to 100 pixels in style.css.

Folder Icon

Take this course for free

Already have an account?