Each element in a document is represented by a rectangular box. Its has four parts:-
- Content Area
- Padding Area
- Border Area
- Margin Area
Content Area
Represented by content edge(blue colored area). It is the area that is actually taken by the content for example any text or image or any video. Its has its width and height.
Padding Area
Represented by padding edge(green colored area). It is actually the space between content's area and border. Using shorthand padding property of CSS or padding-top, padding-right, padding-bottom, padding-left of CSS its width and height can be set.
Border Area
Represented by border edge(yellow colored area). After Padding area border area is present is holds border of the element, if any. border-width property of CSS can determine thickness of border
Margin Area
Represented by margin edge(dark orange colored area). The outer most area of any element is margin area, as you may know margin can be used to keep distance between two different elements. Its sizing can be done using margin property for shorthand or margin-top, margin-right, margin-bottom, margin-left CSS properties
Top comments (0)