Is it possible to achieve HTML padding with full width and height?

Question

Is it possible to achieve HTML padding with full width and height?

Is there a way to make a <div> completely fill up a parent div, while still maintaining a 5% gap around its content? Applying the rules

width: 100%; height: 100%; padding: 5%;

achieves the desired effect for the <div>, but causes it to exceed its parent element's bounds. How can this be done without overflowing?

I'm seeking a solution that ensures the <div>'s bounds take up 100% of its parent's and retains a 5% padding. While hacky solutions may exist, I am interested in an elegant and future-proof approach. Modern CSS technologies like Grid and Flexbox could potentially provide a cleaner solution to positioning and sizing issues with individual divs.

html css

Answer 1

Answer №1

To ensure that padding and border are included in the total width and height of elements, you can use box-sizing:border-box:

For example:

*{
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

Make sure to check this code snippet for reference:

body {
  margin:0;
  padding:0;
}
.demo {
  width:100%;
  height:100vh;
  float:left;
  background:#000;
  padding:5%;
  box-sizing:border-box;
}

<div class="demo"></div>

Answer 2

To ensure that padding and border are included in the total width and height of elements, you can use box-sizing:border-box:

For example:

*{
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

Make sure to check this code snippet for reference:

body {
  margin:0;
  padding:0;
}
.demo {
  width:100%;
  height:100vh;
  float:left;
  background:#000;
  padding:5%;
  box-sizing:border-box;
}

<div class="demo"></div>

Is it possible to achieve HTML padding with full width and height?

Answer №1

Similar questions

What is the best way to overlay text onto a background image using Material UI's Card and CardMedia components?

Hiding an image when pressing on a navbar icon: Tips and tricks

Differences in color rendering between XAML WPF and HTML

Using Python2.7 and HTMLParser to retrieve a string from HTML

When scrolling, apply a CSS class to a div element once it becomes visible on the

Issues with HTML underline <u></u> not functioning properly in RDLC report

Ways to position two buttons in each corner with flexbox in a react js application

Safari seems to be disregarding the CSS transform-origin property, and setting `transform-box: fill-box` is not

Guide on relocating the label to the left side of the input fields

How about trying out some dropdowns?

Tips on how to implement a gravity effect using JavaScript

Is it possible to customize the appearance of password fields with reduced dot size in Safari on iOS 12?

Bootstrap-4 grid system is effectively maintaining its responsiveness without collapsing

If you utilize a span element with the attribute role="textbox" and contenteditable set to true, the copying and pasting of text within it may not function correctly

What's causing margin-top to be reversed while margin-bottom remains stationary?

Version 1 of Vue.js is not compatible with Ajax-loaded HTML files

Trouble with fetching data using Jquery ajax GET request

Having trouble accessing the link from the dropdown list in Selenium

What is the best way to pass a form result from a parent component to a child component

Dynamically assigning column values based on object properties