Height and Width

The height and width of the content area.

Borders

The thickness and style of the border surrounding the content area and padding.
Borders can be set with a specific width, style, and colour.
p { border: 3px solid coral; }

Border Radius

Rounds the corners of the square
p { border-radius: 5px }
You can create a border that is a perfect circle by first creating an element with the same height and width, then setting the radius equal to half the width of the box.
p { border-radius: 50% }

Padding

The space between the contents of a box and the borders of a box; it's like the space between a picture and the frame surrounding it. This is often used to expand the background colour and make the content look less cramped.

p { padding: 10px; }
p { padding-top: 10px; }And by extension right bottom left
p { padding: top right bottom left; }Always starts from top going clockwise for all elements

Margin

The space directly outside of the box.

p { margin: top right bottom left; }
p { margin: top left/right bottom; }
p { margin: top/bottom left/right; }
p { margin: 0 auto; }This code will center divs in their containing elements. 0 sets the top and bottom margins to 0 pixels and the auto value instructs the browser to adjust left and right margins until the element is centered within its containing element.

Do note that vertical margins collapse and horizontal margins do not; horizontal margins add up, whereas vertical margins take the value of the bigger margin.

Min & Max Height and Width

Because a webpage can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size. To avoid this problem you use:
min-width
max-width
min-height
max-height

Overflow

Ensures that we can view all of an element that is larger than its parent's containing area. Overflow controls what happens to content that spills, or overflows, outside its box.

    Keyword values:
  1. overflow: visible;
    2. Default value. When set to this value, the overflow content will be displayed outside of the containing element.
  2. overflow: hidden;
    3. Any content that overflows will be hidden from view and clipped at the element's padding box.
  3. overflow: clip;
    4. Overflow content is clipped at the element's overflow clip edge tha tis defined using the overflow-clip-margin property or by 0px if not set. Content outside the clipped region is not visible.
  4. overflow: scroll;
    5. A scrollbar will be added to the element'x bos so that the rest of the content can be viewed by scrolling.
  5. overflow: auto;
    6. Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars.
  6. overflow: hidden visible;

    Global Values:
  1. overflow: inherit;
  2. overflow: initial;
  3. overflow: revert;
  4. overflow: revert-layer;
  5. overflow: unset;
If two keywords are specified, the first value applies to overflow-x in the horizontal direction and the second one applies to overflow-y in the vertical direction.

Resetting

All major web browsers have a default stylesheet they use in the absence of an external stylesheet, also known as user agent stylesheets.

User agent stylesheets often have default CSS rules that set default values for padding and margin. This affects how the browser displays HTML elements, which can make it difficult for a developer to design or style a web page. You can reset the default values so you can work with a clean slate.

* { margin: 0; padding: 0; }

Visibility

    The visibility property can be set to one of the following values:
  1. Hidden
    2. The element will not be visible on the webpage, but the space reserved for it will. display: none; completely removes it from the page.
  2. Visible
  3. Collapse