For example,^ to apply the flexbox style to elements in a

browser, like Chrome, you simply add the -webkit-flexbox property to your

CSS.

The traditional CSS Box model

The CSS box model is essentially a box that wraps around every

HTML element. It consists of: margins, borders, padding, and the actual

content.

• Content - The content of the box, where text and images appear


• Padding - Clears an area around the content. The padding is transparent


• Border - A border that goes around the padding and content


• Margin - Clears an area outside the border. The margin is transparent

Block-level and Inline Elements

Within the CSS Box model, there are two categories of elements

• block-level


• inline

Block-level elements create boxes that are a part of a page’s layout.

This category includes articles, sections, paragraphs, headers, footers and

more.

Examples of block-level elements:

• 
  
  
  


• 
  

  -

  
  



•