Does element width include padding in CSS ?

Last Updated : 11 Jul, 2022

Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to the web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. It describes how a webpage should look. CSS lets developers and designers define how it behaves, including how elements are positioned in the browser.

In this article, we will learn about width property and find out whether element width includes padding or not.

Width of Element: The width property in CSS is used to set the width of the text, and images. The width can be assigned to the text and images in the form of pixels(px), percentage(%), centimetre(cm) etc. The width property does not contain padding, borders, or margins. The width property is overridden by the min-width and max-width properties. The width property, by default, sets the width for the content area, although if the value of the box-sizing is set to border-box then it will set the width of the border area.

Padding of Element: CSS paddings are used to create space around the element, inside any defined border. We can set different paddings for individual sides (top, right, bottom, left). It is important to add border properties to implement padding properties.

Does element width include padding? No, element width does not include padding, margin, or border. The basic difference between padding and width is that in padding you define the space around the element and on the other hand in the width you define the space of the element.

Property Used:

width: This property is used to define the size of the element.
padding: This property is used to define the space around the element

Example 1: Padding is not included when you apply the width property. Padding is applied only when you intentionally apply padding to any element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .with { 
            background-color: green; 
            width: 230px; 
            border: 2px solid black; 
            padding: 10px; 
        } 
  
        .without { 
            background-color: green; 
            width: 230px; 
            border: 2px solid black; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <div class=with> 
        <h2>With Padding</h2> 
    </div><br> 
    <div class=without> 
        <h2>Without Padding</h2> 
    </div> 
</body> 
  
</html>

Output:

Example 2: Padding is not included when you apply the width property. Padding is applied only when you intentionally apply padding to any element.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        h1,h3{ 
            text-align:center; 
        } 
        .with1 { 
            background-color:green;         
            border:4px solid black; 
            padding:10px;           
        } 
        .with2 { 
            background-color:green;         
            border:4px solid black; 
            padding:20px;           
        } 
        .with3 { 
            background-color:green;         
            border:4px solid black; 
            padding:30px;           
        } 
        .without { 
            background-color:green; 
            width:230px; 
            border:4px solid black; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>A computer science portal for geeks</h3> 
    <div class=with1> 
       <button>With 10px Padding</button> 
    </div><br> 
        <div class=with2> 
       <button>With 20px Padding</button> 
    </div><br> 
    <div class=with2> 
       <button>With 30px Padding</button> 
    </div><br> 
    <div class=without> 
       <button>Without Padding</button> 
    </div>     
</body> 
</html>