But first...

Let us recap!

• Selectors
• Selectors
• And Selectors...

The Box Model

Everything is boxes!

Lets have a look to these boxes

Types of boxes

We can say there are two main types of boxes

• Block boxes
• Inline Boxes

This will tell us how do they interact with other elements and how they behave

Block Boxes

• Take up the entire space of the container
• Breaks into a new line
• width and height properties will be respected
• Padding, margin and order will push others away
• <h1>, <p> are block elements

Inline Boxes

• Take only the space they need
• width and height don't apply
• Breaks into a new line
• Vertical margin, border and padding apply but dont move other boxes
• Horizontal margin, border and padding will apply and move other boxes
• <a>, <span> are inline elements
• They cannot contain other block elements

Let's take a look!

How do we change it?

In order to change the type of the box we use the display property

              
                  .block {
                    display: block
                  }
                  .inline {
                    display: inline
                  }
              
            

Using width and height

These properties apply only to the content!

width + padding + border = actual width of an element

height + padding + border = actual height of an element

DEMO!

Box Sizing

              
                  .border-box {
                    box-sizing: border-box;
                  }

                  .content-box {
                    box-sizing: content-box;
                  }
              
            

More HTML

<header>

• Identifies the content that precedes the primary content of the page
• It can contain other elements as navigation, search, branding...
• It can be used as well as a header for the article tag

<nav>

• Represents a section that contains navigation elements
• There might be several navs but they should be properly described
• Is best reserved for the primary navigation areas

<aside>

• Used for content that is not very important
• Identifies content related to the primary content
• Related links, advertisements...

<article>

• Identifies a self contained pice of information that it could be distributed to other websites as a unit
• Each article should have a heading as a child
• There can be multiple articles in one document
• Forum or blog post, magazine article...

<section>

• Represents a generic content
• It groups together related elements
• Should have a heading as a child
• There can be multiple sections in one document

<footer>

• Represents the footer of a page, section or article
• Is placed at the bottom of its parent element
• Copyright, author, nav elements

<main>

• Includes content that is unique to the page
• It can be used only once per page
• It should not have elements such as footer, header, main navigation

<form>

• Contains interactive controls for submitting
• It can contain other elements such as <input>, <select>, <option>

More on form element

<input>

• Is used to gather data from the user
• How it works will be dependant of their attributetype
• Every input should have an associated label

More on input element

<button>

• Represents a clickable element
• It generally indicates that an action can by done by pressing it
• If the button is not for submitting a form we need to set their type to button

More on button element

<select>

• It provides a menu of options
• Each option has a value represented by the <select> tag

More on select element

<textarea>

• Represents a multiline text control
• Useful when we want to capture large amounts of text from the user

More on textarea element