Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

LESSON: html-css-layout


Tags: html, css, box-model, media queries


• Explain the box model of element spacing. • Establish spacing inside and outside of elements using margin and padding. • Explain the difference between different types of distance measurement in a web page, including 'px', '%', and 'em'. • Use 'float' and 'clear' to stack elements alongside each other. • Employ media queries to change CSS rules based on screen size. • Explain the difference between 'static' and 'fixed' positioning.


hard-coded: code in a program that is written in such a way that they cannot be altered without modifying the program.

Semantic: to be logical and or to have a specific meaning.

Box Model

Border: sets a perimeter around an element. You can specify it’s color and thickness.

Margin: specifies spacing between the outside of an element's border and any adjacent elements.

Padding: specifies spacing between the inside of an element's border and the contents of that element

The elements above, including height and width, can be measured in the following terms:

px: unit of measurement that counts as the little squares that make up your screen.

% : which is the % of the size of the element containing your content. Example:

<div class=”parent”>
	<li> Hello </li>
	<li> World </li>
	<p> We are the children and the div is our mama. We take the height and      width that you assign to her. </p>

em: ties measurement to font size. One em is the width of the letter 'm'. For all dimensions except font-size, em will refer to the font size of the element.

“clearfix” hack: a way for an element to automatically clear its child elements.

A media query acts a little like an if statement for your CSS; it will selectively hide or show the CSS it contains based on whether or not the condition in the query comes back as true. Example:

@media (max-width: 700px) {
  div {
    width: 300px;
    height: 300px;