Sign up now
to enroll in courses, follow best educators, interact with the community and track your progress.
Download
The Box Model of CSS (in Hindi)
235 plays

More
In this lesson, we will get familiar with concepts of box model and learn how to get the actual width, height using the box model.

Sourabh Adhikari
Hi guys, I am currently pursuing my engineering course. I love to code and to share my knowledge with others. Follow for more amazing course

U
Unacademy user
  1. PROPERTIES & LAYOUT IN CSS: BOX MODEL


  2. The CSS Box Model 2 All HTML elements can be considered as boxes. The CSS box model represents the design and layout of the site. It consists of margins, borders, paddings, and the actual content. The properties work in the same order: top, right, bottom, and left.


  3. The CSS Box Model 3 Margin (transparentTOP 1 Border Padina. - Padding___-___-_- CONTENT LEFT I IRIGHT BOTTOM


  4. The CSS Box Model 4 Every element of the webpage is a box CSS uses the box model to determine how big the boxes are and how to place them The box model is also used to calculate the actual width and height of the HTML elements.


  5. Total Width of an Element When working with boxes, it is important to understand how the total width of an element is calculated. For example, the total width of the box with paddings will be the sum of width plus padding leftand padding right. padding-left: 10px padding-right: 10px width: 200px Total Width: 220px 10+200+10


  6. Total Width of an Element 6 The total width is the sum of left and right margins, left and right borders, left and right paddings, and the actual width of the content. padding-left: padding-right: 10px 10px border-left: border-right: 2px 2px margin-left 15px margin-right: 15px 2 width 200px Total Width: 254px 15+2+10+20010 2+15


  7. Total Width of an Element 7 When you set the width and height properties of an element with CSS, you set the width and height of the content area. When setting a background-color to a box, it covers the content area, as well as the padding.


  8. Total Height of an Element 8 The total height of an element is calculated the same way as the width. Total element height= height + top padding + bottom padding + top border + bottom border+ top margin + bottom margin The example below is the same box from the previous lesson with padding, border and margin.


  9. Total Height of an Element margin-top 15px border-top 2px padding-bottom 10px padding-top 10px border-bottom 2px height:1 . 200px margin-bottom: 15px Total Height: 254px 15 +2 10 20010+2+15


  10. THANK YOU.