CSS Box Model
The CSS Box model is everything around the box, it is concept pf layout and design in web development. it is defined how the elements on page are structure in term of space dimension
Content Box – It is the area where you keep content. It can be defined with height and width.
Padding Box – Space between the content and the border.
Border Box – A line surrounding the padding and content.
Margin Box – The space outside the border, creating distance between this element and others.
<html><head>
<style> .card-apitpoint { width: 300px; padding: 100px; border: 1px solid #1f2a1f; margin: 20px auto; text-align: center; }
.card-apitpoint img { width: 60px; height: 60px; border-radius: 40%; margin-bottom: 10px; }</style></head><body>
<div> <img src=”https://apitpoint.com/images/p1.jpg” alt=”Profile Picture”> <h3>APITPOINT</h3> <p>Web Developer fro Blog</p></div>
</body></html>
Margin:
It specifies the space outside the border of an element, creating separation between it and other elements.
You can define margin using the following properties:
margin: Shorthand property to set the margin for all four sides (top, right, bottom, left) in one line.
- margin-top: Sets the top margin.
- margin-bottom: Sets the bottom margin.
- margin-left: Sets the left margin.
- margin-right: Sets the right margin.
Padding
it defines space around the content. – It uses the properties
padding [short hand for all directions]
- padding-left
- padding-right
- padding-top
- padding-bottom
Border
The border is around the content or padding. – CSS border can be defined with several effects
border-color
- border-top-color
- border-bottom-color
- border-left-color
- border-right-color
border-style:
- border-left-style
- border-right-style
- border-top-style
- border-bottom-style
border-width
- border-top-width
- border-bottom-width
- border-left-width
- border-right-width
border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
border-image
- border-image-outset
- border-image-repeat
<html><head>
<style> .box-apitpoint { width: 200px; margin: 20px auto; padding: 15px 20px; border: 3px solid #4CAF50; border-radius: 8px; text-align: center; }
.margin-example-apitpoint { background-color: #a69f9f; padding: 10px; margin-top: 10px; margin-bottom: 20px; margin-left: 15px; margin-right: 25px; }
.padding-example-apitpoint { padding-right: 25px; padding-top: 10px; padding-bottom: 20px; padding-left: 15px;
}
.border-example-apitpoint { border-color: #ff5722; border-top-width: 5px; border-bottom-width: 10px; border-left-style: dashed; border-right-style: dotted; border-top-right-radius: 10px; border-bottom-left-radius: 10px; }</style></head><body>
<div> <h2>Box Model Example</h2></div>
<div> this is customized margins on each side.</div>
<div> This box has customized padding on each side.</div>
<div> This box has customized borders with varied colors, styles, and widths.</div>
</body></html>
