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
HTML DOM Style boxSizing Property
The HTML DOM boxSizing property is used to specify the way an element’s total width and height is calculated. It can have "border-box" or "content-box" as values.
Following is the syntax for −
Setting the boxSizing property −
object.style.boxSizing = "content-box|border-box|initial|inherit"
The property values are explained as follows −
| Value | Description |
|---|---|
| content-box | This is the default value and any padding or border width will be added to the content box final width. |
| border-box | In border-box the width specified stays intact and the content box shrinks if any padding or border is applied to it. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value |
Let us look at an example for the boxSizing property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height:100px;
width: 350px;
border: 30px solid lightpink;
box-sizing: border-box;
}
</style>
<script>
function changeBoxSizing(){
document.getElementById("DIV1").style.boxSizing="content-box";
document.getElementById("Sample").innerHTML="The box sizing is now changed to content-box ";
}
</script>
</head>
<body>
<div id="DIV1">
THIS IS SAMPLE TEXT INSIDE DIV.HELLO WORLD DIV.
</div>
<p>Change the above div box-sizing property by clicking the below button</p>
<button onclick="changeBoxSizing()">Change Box Sizing</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Box Sizing” button −
Updated on: 23-Oct-2019
20 Views
Advertisements