CSS_boxmodel.md - brainchildservices/curriculum GitHub Wiki

Slide 1

CSS BOX MODEL

  • CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself.
  • It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements.
  • The web browser renders every element as a rectangular box according to the CSS box model.

Slide 2

Border Area

  • It is the area between the box’s padding and margin.
  • Its dimensions are given by the width and height of border.
  • border-width: - The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
  • The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):
    • border-style: - The border-style property specifies what kind of border to display.
    • 10 different values are there for border-style.
    • border-radius: - The border-radius property is used to add rounded borders to an element.

image

Slide 3

Margin Area

  • This area consists of space between border and margin.

  • The dimensions of Margin area are the margin-box width and the margin-box height.

  • Margins are used to create space around elements, outside of any defined borders.

  • CSS has properties for specifying the margin for each side of an element:

    • margin-top :- Sets the top margin of an element
    • margin-right :- Sets the right margin of an element
    • margin-bottom :- Sets the bottom margin of an element
    • margin-left :- Sets the left margin of an element

Slide 3 Downwards

Example

Set different margins for all four sides of a <p> element:

  p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
  }

image

Slide 4

Padding Area

  • It includes the element’s padding. This area is actually the space around the content area and within the border box.

  • Its dimensions are given by the width of the padding-box and the height of the padding-box.

  • CSS has properties for specifying the padding for each side of an element:

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

image

Slide 5

Tasks

Exercise: Set the left margin of <h1> to "20px".

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 h1 {
   background-color: lightblue;
 }
 </style>
 </head>
 <body>

 <h1>This is a Heading</h1>
 <p>This is a paragraph.</p>

 </body>
 </html>

image

⚠️ **GitHub.com Fallback** ⚠️