Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How is border-box different from content-box?
A beautiful website can be created using the stylesheet language CSS (Cascading Style Sheets). Utilizing this will make the process of making web pages visually appealing simpler. You can use it to apply styles to web pages.
When utilizing width or height, the CSS Box Sizing property gives us the option to select either the border-box or content-box property. CSS by default applies the specified width and height to the content inside. Let’s dive into the article to learn about the border-box that is different from content-box.
CSS border-box property
The width and height properties in this mode include content, padding, and borders. For instance, if we set an element's width to 10 pixels, that 10 pixels will also include whatever border or padding we placed, and the content box will shrink to accommodate that extra width. As a result, sizing elements is usually simpler.
Syntax
Following is the syntax for CSS border-box property
box-sizing: border-box;
Example
Let’s look at the following example, where we are going to use the box sizing property, whose value is set to the border box.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 55px;
padding: 15px;
border: 1px solid #5B2C6F;
background: #D5F5E3;
color: #DE3163;
}
.tp {
box-sizing: border-box;
}
body {
font-family: verdana;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<br>
<div class="tp">WELCOME</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the text applied with CSS and the border box sizing property displayed on the webpage.
CSS content-box property
This is the box-sizing property's default value. In this mode, only the content is included in the width and height property. Border and padding are not included in it; for example, if we set an element's width to 10px, the content box will be 10 pixels wide, and any border or padding will be added to the element's final rendered width.
Syntax
Following is the syntax for CSS content-box property
box-sizing: content-box;
Example
Following is an example where we are going to use the CSS content-box sizing property.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
background-color: #E8DAEF;
color: #DE3163;
border-color: #D5F5E3;
height: 100px;
width: 350px;
box-sizing: content-box;
padding: 20px;
border-width: 10px;
border-style: solid;
margin: 10px;
font-family: verdana;
}
</style>
</head>
<body>
<h1 class="tutorial">TUTORIALSPOINT</h1>
</body>
</html>
On running the above code, the output window will pop up, displaying the text applied with the content-box sizing property displayed on the webpage.
Example
Now, let’s consider another example where we are going to observe the difference between the border box and the content box.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
padding: 10px;
border: 3px solid #6C3483;
background: #D5F5E3;
color: #DE3163;
font-family: verdana;
display: inline-block;
}
.x {
box-sizing: content-box;
}
.y {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="x">
<h3>HII..(content-box)</h3>
</div>
<div class="y">
<h3>HI:)(borderbox)</h3>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the two div boxes applied with the border-box and content-box sizing properties applied with the same width, and we can observe the difference between them.
64 Views
