[TIL] 20201116 The CSS Box Model

Box Model

• Every element in CSS is a box.

Width & Height

/*example*/

div {
    width: 200px;
    height: 200px;
}

 

 

Border Properties

Individual Properties

• border-width: controls the thickness of the border.
• border-color: controls the color of the border.
• border-style: controls the line style - dashed, solid, etc.

border (shorthand)

#one {
    border-width: 5px;
    border-color: black;
    border-style: solid;
    box-sizing: border-box; /* border goes into the box */
}

/* Or, in shorthand, 
   in order of width, style, color,
*/

#one {
	border: 5px, dashed, green;
}

Border Radius

• can use length or percentage.
• can choose a specific corner individually.

 

 

Padding

• The space between the content box and the border.

Individual properties

• padding-left, padding-right, padding-top, padding-bottom

Shorthand property : padding

#one {
    padding: 10px; /* four sides */
    padding: 5px 10px; /* vertical, horizontal */
    padding: 1px 2px 3px; /* top, horizontal, bottom */
    padding: 3px 10px 0 5px; /* top, right, bottom, left (clockwise) */
}

 

 

Margin

• The space between the content boxes.
• Body element has a default margin.
• Properties
  • Individual Properties: margin-left, margin-right, margin-top, margin-bottom
  • Shorthand Property: margin

margin: 10px; /* 4 sides */
margin: 5px 10px; /* vertical horizontal */
margin: 1px 2px 3px; /* top horizontal bottom */
margin: 4px 10px 3px 5px; /* top right bottom left (clockwise) */

 

 

 

Display

inline

• Width & Height are ignored.
• Margin & Padding push elements away horizontally but not vertically.

block

• Break the flow of a document.
• Width, height, margin & padding are respected.

inline-block

• Behaved like an inline element except width, height, margin & padding are respected.

none

• Hidden, dispeared on the page.

 

 

Relative Units

Percentages

• Always relative to some other value.

width: 50% /* half the width of the parent element */
line-height: 50% /* half the font-size of the element itself */

EM

• Has to do with the width of the height of the uppercas letter M and typography.
• With font-size, 1em equals the font-size of the parent. 2em is twice the font-size of the parent, etc.
• With other properties like padding and margin, 1em is equal to the computed font-size of the element itself.
• If we use em, things scale as that font-size changes.

REM

• Issues with em
  • When it comes to lists, em can stack, making them grow or shrink very quickly. 
  • EM is based on parent's font-size, so as em stacks, they are multiplied.
• rem
  • Related to the root html element's font-size
  • Often easier to work with.
  • Can maintain the ratio throughout the nested elements.
  • ex) If the root font-size is 20px, 1rem is always 20px, 2rem is always 40px, etc.

 

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.