CSS Properties: How to specify that division elements should have padding and border included in the element?

Last update on February 20 2024 12:25:57 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How to specify that division elements should have padding and border included in the element</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
.div1 { /* Defines a CSS rule for elements with class "div1" */
width: 300px; /* Sets the width of elements with class "div1" to 300 pixels */
height: 100px; /* Sets the height of elements with class "div1" to 100 pixels */
border: 1px solid #FF0000; /* Sets the border properties of elements with class "div1" to a 1-pixel wide solid red border */
}
.div2 { /* Defines a CSS rule for elements with class "div2" */
width: 300px; /* Sets the width of elements with class "div2" to 300 pixels */
height: 100px; /* Sets the height of elements with class "div2" to 100 pixels */
padding: 50px; /* Sets the padding of elements with class "div2" to 50 pixels */
border: 1px solid #4364FF; /* Sets the border properties of elements with class "div2" to a 1-pixel wide solid blue border */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<p>w3resource Tutorial</p><!-- Displays a paragraph with the text "w3resource Tutorial" -->
<div class="div1">Box-size: smaller (width is 300px and height is 100px).</div><!-- Displays a div element with class "div1" and the specified text -->
<br><!-- Inserts a line break -->
<div class="div2">Box size: bigger (width is also 300px, height is 100px, and padding 50px).</div><!-- Displays a div element with class "div2" and the specified text -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

The .div1 CSS rule defines the styling for elements with class "div1".
The .div2 CSS rule defines the styling for elements with class "div2".
Both rules set the width and height of the elements to 300 pixels by 100 pixels respectively.
.div1 sets a red border with 1 pixel width.
.div2 sets a blue border with 1 pixel width and adds 50 pixels of padding to all sides of the element.

Live Demo:

See the Pen box-sizing-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page