How to Add Padding or Border to a Div and Keep Width and Height

How to add padding or border to a DIV and keep width and height?

Yes you can use

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

to change the box model to make borders and padding internal to your width/height, but margins are still added.

and your updated Fiddle

more information here css tricks

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 to change a DIV padding without affecting the width/height ?

Solution is to wrap your padded div, with fixed width outer div

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

When 1 px border is added to div, Div size increases, Don't want to do that

The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.

Eg:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

Fixed div with padding increase width

You can use box-sizing to fit it in:

box-sizing: border-box;

Box-sizing values:

content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.

border-box: The width and height properties include the padding and border, but not the margin.

DIV padding interfering with width

Simply keep the element a block element and you won't need width:100% or box-sizing:border-box (by the way it's good to keep it to avoid any future issue related to padding/border combined with width)

.entryrow {  position: relative;  height: 100px;  background: linear-gradient(#2c647b, #191654);  padding: 5px;  margin: 5px;  border: 1px solid #ccc;  cursor: pointer;}

<div style="background:black;overflow:hidden">  <div class="entryrow">    Blubb  </div></div>

Is there a way of keeping width and height of the div fixed when added padding?

box-sizing: border-box; is what you're looking for.

It changes the default CSS box model to calculate widths and heights of elements including borders and padding but not margin.

6.1. ‘box-sizing’ property

border-box
The specified width and height (and respective min/max properties) on
this element determine the border box of the element. That is, any
padding or border specified on the element is laid out and drawn
inside this specified width and height.

EXAMPLE HERE

---

Related Topics