Box Model

  • .

Content

  • width , height

    • Can be set as %  of the parent container.

  • text-align

    • To position things inside the content.

  • background-color

    • Is applied to content and padding.

Padding

.hero {
    /* All sides */
    padding: 10px;
    
    /* top and bottom, left and right */
    padding: 10px 20px;
    
    /* top, right, bottom, left (it's clockwise, if it helps) */
    padding: 10px 20px 30px 40px;
}

Border

.hero {
    /*     size  type color */
    border: 1px solid black;
}

Margin

.hero {
    /* All sides */
    margin: 10px;
    
    /* top and bottom, left and right */
    margin: 10px 20px;
    
    /* top, right, bottom, left (it's clockwise, if it helps) */
    margin: 10px 20px 30px 40px;
}