CSS border inside padding

Question

I Have a simple css box made with:

border: 1px solid #CCC;

I'm trying to add some space from the left side of my text to the border. I tried with margins and padding but it's always outside the box, while I would like some margin inside.

My text inside the box is always attached to the left side, how can I add some margin/space between the text and the box?

I have the code on: https://jsfiddle.net/z2v27rcq/ if it helps.

Answer 1

Use padding , that's inside the border:

 div { box-sizing: border-box; display: inline-block; width: 150px; border: 1px solid #CCC; padding: 30px 20px; }

 <div style="border: 1px solid #AAA"> <p> Hey! </p> </div>

Answer 2

You weren't using padding properly, you just needed to add some padding to the left:

 div { display: inline-block; width: 150px; height: 50px; border: 1px solid #CCC; padding-left: 10px; }

 <div style="border: 1px solid #AAA"> <p> Hey! </p> </div>

Answer 3

You need to add padding on the div itself:

  div {
     padding-left: 5px;
    }

or add padding to all sides of the box like this:

div {
 padding: 5px;
}

Answer 4

Add one more div and border to outer div and padding to inner div.

<div style="border: 1px solid grey">
    <div style="padding: 10px;">
        <!-- Your Stuff -->
    </div>
</div>