Keep Padding from Making The Element Bigger

Prevent padding from making an element bigger?

When you use the border-box model, the padding is included in the box size. See here for details.

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  box-sizing: border-box;
  padding: 25px;
  float: left;
  width: 30%;
  background-color: lightgreen;
}

<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

Padding makes the element bigger instead of clear the space around the element

Let's say you got elements like this:

.parent{  padding:20px;  background:blue;  display:inline-block;}.parent div{  padding:20px;  height:80px;  width:80px;}.child1{  background:green;  box-sizing:border-box;}.child2{  background:purple;}

<div class="parent">  <div class="child1"></div><br>  <div class="child2"></div></div>

How do you prevent expanding outer element when adding padding?

What you want is the box-sizing property. Take a look at this jsFiddle for it in practice. Just add this:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

to your #login CSS. This is supported in most modern browsers, including IE8+.

Prevent padding from making an element bigger?

When you use the border-box model, the padding is included in the box size. See here for details.

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  box-sizing: border-box;
  padding: 25px;
  float: left;
  width: 30%;
  background-color: lightgreen;
}

<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

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

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

Adding padding change size of containing div even when using box-sizing: border-box;

Put it into a container

<button id="btn">Click me to add more padding</button>
<div class="button-container">
    <div id="button">
        <div id="label">
            Click me!
        </div>
    </div>
</div>

CSS

* {
  box-sizing: border-box;
}  

.button-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}    

#button {
  width: 100%;
  height: 100%;
  background-color: red;
}  

#label {
  font-size: 50px;
}

How can I make an element full height while keeping the padding?

It can be achieved with use of flex flex-col on a parent element and flex-grow on a child

<body class="p-5 bg-gray-50 space-y-5 min-h-screen flex flex-col">
  <div class="bg-white p-5 rounded-lg border space-y-3 flex-grow flex flex-col">
    <p>Lorem Ipsum dolor at... </p>
    <div class="border flex bg-gray-100 flex-grow"></div>
    <!-- This element -->
  </div>
</body>

Demo here - try to change paddings, add more text

Keep Padding from Making The Element Bigger

Prevent padding from making an element bigger?

Padding makes the element bigger instead of clear the space around the element

How do you prevent expanding outer element when adding padding?

Prevent padding from making an element bigger?

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

Adding padding change size of containing div even when using box-sizing: border-box;

How can I make an element full height while keeping the padding?

Related Topics

Leave a reply