How to use‘calc()’ and ‘box-sizing’ in CSS

Approach 2: Using Flexbox Container Method

Here, we are using CSS properties like ‘calc()’ and ‘box-sizing’ for creating responsive and adjusting proper element width ‘100% minus padding’. These properties also assure consistent and visually appealing layouts across various devices and screen sizes.

Example: In this example, we are using the ‘calc()‘ and ‘box-sizing‘ to make an element width: 100% minus padding.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="styles.css"> 
    <title>Element Width Examples</title> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="geeks-title"> 
              w3wiki 
          </h1> 
  
        <div class="example"> 
            <h2>Without 100% Minus Padding</h2> 
            <p> 
                  This input element has its width set  
                  to 100%, including padding. 
              </p> 
            <div class="input-container"> 
                <label for="input-with-padding"> 
                      Input without 100% - padding: 
                  </label> 
                <input type="text" id="input-with-padding" 
                       class="input-with-padding" 
                       placeholder="Enter text"> 
            </div> 
        </div> 
  
        <div class="example"> 
            <h2>With 100% Minus Padding</h2> 
            <p> 
                  This input element uses  
                  <code>width: 100% - padding</code>  
                  to maintain full width after padding. 
              </p> 
            <div class="input-container"> 
                <label for="input-minus-padding"> 
                      Input with 100% - padding: 
                  </label> 
                <input type="text" 
                       id="input-minus-padding" 
                       class="input-minus-padding" 
                       placeholder="Enter text"> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

/* style.css */
body { 
    font-family: Arial, sans-serif; 
    background-color: #f0f0f0; 
    margin: 0; 
    padding: 0; 
} 
  
.container { 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 20px; 
} 
  
.geeks-title { 
    color: green; 
    text-align: center; 
} 
  
.example { 
    margin: 20px 0; 
    padding: 20px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
} 
  
.input-container { 
    margin-top: 15px; 
} 
  
.input-with-padding, 
.input-minus-padding { 
    padding: 10px; 
    border: 2px solid #ccc; 
    width: 100%; 
    transition: border-color 0.3s; 
} 
  
.input-minus-padding { 
    width: calc(100% - 20px); 
    /* Subtracting 20px from the width  
         to account for padding */
    box-sizing: border-box; 
    /* Including padding and border  
         in the calculated width */
    border-color: dodgerblue; 
    background-color: #f5faff; 
} 
  
.input-with-padding:focus, 
.input-minus-padding:focus { 
    border-color: dodgerblue; 
}

Output:

How to make an element width: 100% minus padding ?

In this article, we will see different examples to make an element’s width: of 100% minus padding. We have a few methods to make an element width: 100% minus padding which are described in detail below.