Padding inside of div for text

Question

I would like to add a padding around a text placed inside a div so that there is some place between the divs border and the text.

I have found an interesting post about that.

But somehow all the given examples expand my div so it does not fit in the entire layout anymore.

I have used that css code for the div:

.cell {
   width:30%;
   height:100%;
   background-color:orange;
   outline:10px solid black;
}

That code gives me the following result:

The orange colored area is the div I want to have the text positioned in. All the solutions keep expanding the div with borders so the layout expands and that is what I am trying to avoid to.

So I have tried to add padding (that should be inside the div):

.cell {
    width:30%;
    height:100%;
    background:orange;
    padding: 10%;
}

Gave me the result:

Perhaps the problem is that I am using jQuery BigText to make the text fitting into the div:

jQuery:

 $(function() {
            $(window).on('resize', function() {
                  $(".area_competences_text").bigText();
            });
                $(window).trigger('resize');    
            });

Html:

<div class ="cell">

                      <div class="area_competences_text text_software"> 
                          <div class="referencesProductHeader">            
                            HEADER TEXT
                          </div>
                                <ul class="listStyle">
                                 <li>Some Text</li>  
                                 <li>Some Text</li>  
                                 <li>Some Text</li>  
                                 <li>Some Text</li>  
                                 <li>Some Text</li>  
                                </ul>  

                       </div>
</div>

Can you replicate the issue in jsFiddle? – An0nC0d3r Dec 16 '15 at 08:17 — An0nC0d3r, Dec 16 '15 at 08:17

score 1 · Accepted Answer · answered Dec 16 '15 at 08:14

You are probably looking for box-sizing:border-box, it makes the element include the padding in the width so it dosent expand on extra added padding.

Code:

.cell {
    box-sizing:border-box;
    width:30%;
    height:100%;
    background:orange;
    padding: 10%;
}

Example

score 0 · Answer 2 · answered Dec 16 '15 at 08:54

This is the expected behavior. You may want to learn about the CSS box model.

Basically, width and height are not the total width and height of the div. Padding, borders, and margin all need to be accounted for when calculating how big you want the div.

You can use box-sizing:border-box; to change this, or adjust the width and height values.

Padding inside of div for text

2 Answers2