CSS Box Model
CSS Box Model, the layout of web pages document, the browser’s engine represents the web Pages element as a rectangular box according to the standard CSS
basic box model. Every CSS box model is represented of four areas (or parts), defined by their respective edges: padding edge border edge margin edge content edge
because the CSS determines the properties, position, size and such as properties (i.e. background, color, border size, etc.) of these boxes.
CSS Box Model Properties
1. Margin Edge:-
The margin edge defines as its bounded by the margin edge, as represented in the Image, extends the border area
to include an empty area used to separate the element from its neighbors.
therefore, Its dimensions (Area) are the margin-box width and the margin-box height.
therefore the size of the margin area can be determined and margin-top margin-bottom margin-left margin-right shorthand margin properties.
In the case, When margin collapsing occurs, in web pages, the margin area is not clearly defined since margins area shared between boxes.
2. Border Edge:-
The border Edge area defined as, it’s bounded by the border edge as seen in the above Image, extends the padding
an area to include the element’s borders.
Border edge (area) dimensions are the border-box width and the border-box height. finally, we can determine the area
with border-box width and border-box height.
as a result, If you want to determine the thickness of the borders, can be determined by the border-width and shorthand border properties.
the border area’s size can be defined in the CSS with the properties. width min-width max-width height min-height max-height
When there is a background (background-image or background-color) set on a box, it extends to the outer edge of the border.
therefore, the border-edge as a default behavior can be altered with the background-clip CSS property.
3. Padding Edge:-
The padding area defined as it is bounded by the padding edge, it can extend by the content area to include the element’s padding.
finally, Padding area can be dimensioned by the padding-box width and the padding-box height.
If you want to calculate the thickness of the padding it’s can be determined shorthand padding properties.padding-top padding-bottom padding-left padding-right
4. Content Edge:-
The content area defined as, it’s bounded by the content edge, contains are such as text which will be real content, a video player or an image.
Its dimensions determined with the content-box width (content width) and the content-box height (content height),
It often has a background image or background color.
therefore, the content area’s size can be defined with the properties. width min-width max-width height min-height max-height
Let us see the Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <head> <title>CSS Box Model</title> <style> .main_box { font-size:36px; font-weight:bold; text-align: center; } .first_ts { margin-left:40px; border:50px solid #29d8b8; width:300px; height:200px; text-align:center; padding:50px; } .second_ts { font-size:35px; font-weight:bold; color:#ffffff; margin-top:50px; background-color:#29d8b8; } .third_ts { font-size:15px; font-weight:bold; background-color:#efefef; } </style> </head> <body> <div class = "main_box">CSS Box-Model Property</div> <div class = "first_ts"> <div class = "second_ts">Tutorial Scan</div> <div class = "third_ts">Learn Web Tutorial and Blog with Tutorial Scan </div> </div> </body> </html> |
Therefore In the above example, you can see the Margin edge, where written in CSS Box Model Properties, border edge where border color #29d8b8 Padding edge where Background-color is in#5f9ea0; the Image, content Edge when written the Content in the above Image.
About Author
