HTML CSS Exercise: Let padding and border not affect available width and height

Last update on March 04 2024 06:50:42 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!doctype html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<title>HTML CSS Exercise - Let padding and border not affect available width and height</title><!-- Title of the HTML document -->
<style> /* Opening style tag for CSS */
.container div{ /* Targeting div elements inside container class */
    /* Setting the box-sizing method: */
box-sizing:border-box; /* Include padding and border in the element's total width and height */
    /* Firefox still requires the -moz prefix */
    -moz-box-sizing:border-box; /* For Firefox compatibility */
width:200px; /* Width of the div */
height:150px; /* Height of the div */
display:inline-block; /* Display as inline block */
vertical-align:top; /* Align elements to the top */
}
.col1{ /* Style for elements with class col1 */
color:#ec8007; /* Text color */
background-color:#5ac4ed; /* Background color */
}
.col2{ /* Style for elements with class col2 */
padding:8px; /* Padding around the content of the element */
border:10px solid #4b6c9c; /* Border with specified width, style, and color */
background-color:#fff; /* Background color */
color:#ec8007; /* Text color */
}
.col3{ /* Style for elements with class col3 */
padding:32px; /* Padding around the content of the element */
background-color:#3d2ca5; /* Background color */
color:#ec8007; /* Text color */
}
</style><!-- Closing style tag -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<div class="container"><!-- Container div -->
<div class="col1">Column 1</div><!-- First column -->
<div class="col2">Column 2</div><!-- Second column -->
<div class="col3">Column 3</div><!-- Third column -->
</div><!-- Closing container div -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML structure consists of a container div with three child divs, each representing a column.
CSS is used to style the columns.
box-sizing:border-box; ensures that padding and border are included in the total width and height of the elements, preventing them from affecting the layout.
Each column has its own styling for color, background color, padding, and border.
The columns are displayed as inline-block elements to appear horizontally aligned.
The colors and dimensions are set according to the provided styles.

Live Demo :

See the Pen let-padding-and-border-not-affect-available-width-and-height-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes