• Home
  • About
    • Miles' Blog photo

      Miles' Blog

      Miles 用來記錄學習心得及筆記的地方。

    • Learn More
    • Email
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

CSS - The Box Model

12 Mar 2018

Reading time ~1 minute

Reference : Codecademy - Learn CSS - The Box Model

  • The box model comprises a set of properties used to create space around and between HTML elements. CSS - The Box Model
Reference : [Codecademy - Learn CSS - The Box Model](https://www.codecademy.com/learn/learn-css)
  • The height and width of a content area can be set in pixels or percentage.
  • Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties.
  • Padding is the space between the content area and the border. It can be set in pixels or percent.
  • Margin is the amount of spacing outside of an element’s border.
  • Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element.
  • Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin.
  • margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width.
  • The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent’s content area.
  • The visibility property can hide or show elements.


I.T.CSS Share Tweet +1