Loading Please Wait...
Each and every HTML element treated as a box when we design and layout HTML document. The browsers used to calculate properties (color size, etc.) of these rectangular box when rendering the HTML page.
CSS box model mainly contains four areas or properties: margin, border, padding, and content.
The content area is the place where the actual content like, text, image, audio, video, etc. appears.
The content area can have their own size if box-sizing property is set to content-box (default). We can set the size by width, height, min-width, min-height, max-width, and max-height properties.
The padding area is the transparent space around the content area.
We can set the padding by padding, padding-top, padding-right, padding-bottom, and padding-left properties.
The border area is the place where border of the element is drawn. It contain padding area and content area.
We can set the border by border, border-width, border-style, border-color, etc properties.
The margin area is the transparent space around the border and contains border, padding, and content area.
We can set the margin by margin, margin-top, margin-right, margin-bottom, and margin-left properties.
div{
margin: 30px;
border: 5px solid red;
padding: 20px;
width: 100%;
height: 200px;
}
Total width = width + left padding + right padding + left border + right border + left margin + right margin
Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved