CODEWITHSUNDEEP
htmlcss
Costantin
Costantin

Reputation: 2656

CSS border inside padding

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.

Upvotes: 2

Views: 34822

Answers (4)

Abdul
Abdul

Reputation: 21

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>

Upvotes: 1

Marco Salerno
Marco Salerno

Reputation: 5203

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>

Upvotes: 1

Johannes
Johannes

Reputation: 67768

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>

Upvotes: 5

Yonatan Shippin
Yonatan Shippin

Reputation: 171

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;
}

Upvotes: 0

Related Questions