CSS Box Model:
The CSS Box Model is an essential concept in web design and development. Every HTML element on a web page is a rectangular box. If we want curved corners, we use CSS. Each rectangular box has different properties.
Content:
It is used for areas where text, images, or other content is displayed. This is the actual content of the element and its dimensions can be controlled using width and height.
- Height
- Width
- Margin
- Padding
- Border
CSS Box Properties:
1. Height:
The CSS height property specifies the height of an HTML element. The height property can be set using various units, such as pixels (px), percentages (%), ems (em) and etc.
Html:
<div class=”container”><div class=”box”>This is a box with fixed height.</div></div>
CSS:
.container {
height: 500px;
border: 1px solid #000;
}
.box {
height: 50%;
background-color: lightblue;
}
1.1 Pixels (px):
Defines a fixed height. For example, height: 400px; sets the element’s height to exactly 400 pixels.
1.2 Percentages(%):
Sets the height relative to the height of the parent element. For example, height: 50%; makes the element 50% as tall as its parent.
1.3 Viewport Units:
Sets the height relative to the viewport height. For instance, height: 100vh; makes the element as tall as the entire viewport.
1.4 Viewport Height (vh):
Viewport Height is based on the height of the user’s visible web page area (viewport).
- The CSS Viewport Height vh Unit equals to 1% of the height of the Viewport (browser window size).
- The height 100vh sets an HTML element to the entire height of the Viewport (browser window size).
- 100vh = 100% of the viewport height.
- 50vh = 50% of the viewport height.
1.5 max-height:
It sets an element’s maximum width, preventing it from expanding beyond this width, even if the content requires more space.
1.6 min-height:
It sets the minimum height an element can have, ensuring that the element does not shrink below this height, even if the content is less.
2. Width:
The CSS width property specifies the horizontal size of the width of an HTML element.
2.1 Viewport Width (vw):
The CSS Viewport Width vw Unit equals to 1% of the width of the Viewport (browser window size). The width 100vw sets an HTML element to the entire width of the Viewport (browser window size).
Html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class=”card”>
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
<button>Get Started</button>
</div>
</body>
</html>
CSS:
.card {
background-image: url(“https://ocean.jpg”);
width: 100vw;
height: 50vh;
}
3. Margin:
The CSS Margin property specifies the space between the content of an HTML element.
HTML:
<div class=”container”>This is Margin</div>
CSS:
.container {
margin: 15px; /*All sides */
margin: 10px 20px; /* Vertical | Horizontal */
margin: 10px 20px 30px; /* Top | Horizontal | Bottom */
margin: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}
4. Padding:
The CSS padding property specifies the space around the content of an HTML element.
HTML:
<div class=”container”>This is Padding</div>
CSS:
.container {
padding: 15px; /*All sides */
padding: 10px 20px; /* Vertical | Horizontal */
padding: 10px 20px 30px; /* Top | Horizontal | Bottom */
padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}
5. Border:
The border property in CSS is utilized to establish the border around an element. It used for customizable attributes.
5.1 Border Width:
The CSS border-width property specifies the width of the border for all four sides of an HTML element.
- The CSS Property and value pair border-width: 2px; removes the border of an HTML element.
- Specifying the CSS border-style property for an HTML element is mandatory. Otherwise, the CSS properties like border-color, border-width will not appear in the browser.
- The HTML button element is an exception as it appears with a border in the browser by default.
CSS:
.button {
border-width: 2px;
}
5.2 Border Radius:
The CSS border-radius property specifies the roundness of the corners of an HTML element.
- Specifying the background color for an HTML element makes the border-radius more visible.
- You can use the below CSS properties to round a specific corner of an HTML element.
- properties are border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius.
.button {
border-radius: 20px;
}
5.3 Border Color:
The CSS border-color property specifies the color of the border for all four sides of an HTML element.
- Specifying the CSS border-style property for an HTML element is mandatory. Otherwise, the CSS properties like border-color, border-width will not appear in the browser.
- The HTML button element is an exception as it appears with a border in the browser by default.
.button {
border-color: orange;
}
5.4 Border Style:
The CSS border-style property specifies the style of the border for all four sides of an HTML element.