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

css

responsive-design

box-sizing

flexbox

byAnton Shumikhin·Jan 13, 2025

The most straightforward method for achieving 100% width minus padding involves utilizing the box-sizing: border-box; property in conjunction with the calc() function in CSS:

.element {
  box-sizing: border-box; // The One Ring to rule all dimensions
  width: calc(100% - 2 * 15px); /* Subtract Gandalf's beard (aka your padding) */
  padding: 15px; /* Gandalf's beard length */
}

Here, box-sizing: border-box ensures the padding is included within the element's width, whereas calc(100% - 2 * 15px) dynamically adjusts for total padding. Amend the padding values to suit your design requirements.

Unpacking box-sizing and padding

CSS's box-sizing is the mysterious wizard governing width management. content-box, its default guise, excludes padding and border from the width calculation, contrary to box-sizing: border-box;, which includes it.

Applying box-sizing: border-box; ensures an element set to width: 100%; will amount to 100% of the parent container including the padding, preventing any undesired overflow.

Handling legacy Browsers: IE7 and below

In cases where users are still surfing with the Internet Explorer version less than 8 (IE7 and below), more innovative measures are necessary, such as using conditional stylesheets, JavaScript, or by encapsulating elements.

Percentages for responsive padding

calc() isn’t the only magic spell for dynamic padding. Using percentage-based padding, for instance, allows elements to adapt effortlessly to various screen sizes while maintaining a responsive design without the need for calc().

.element {
  box-sizing: border-box;
  width: 100%;
  padding: 5%; /* Varys' birds (relatively stealthy...) */
}

However, be aware, percentage padding is calculated based on the width of the container, not the actual element. So, use it wisely or face the unexpected results.

The negative margin charm

Applying negative margins to counteract the added padding can effectively pull an element's edges inward. Use this trick for inline elements or when element positioning becomes a complex task:

.element {
  margin-left: -15px;
  margin-right: -15px; // It's like Inception, but for margins
}

This approach is your friend when you want to avoid messing with the box-sizing due to conduct of existing constraints.

Flexbox and Grid: Modern layout wizards

Advanced CSS layout models, like Flexbox and Grid, offer powerful control options. Using the gap property in these models can add space between items that won't affect the item's width:

.container {
  display: flex;
  gap: 30px; // Prevent your elements from socialising too much
}

.child {
  flex: 1; // Hogwarts' Sorting Hat: everybody gets equal space!
}