stupid CSS issue

[AHarvey]

Hi all,

I have a silly issue with a div and my brain is just overloaded with info so I can't seem to figure it out.

Text sits on the edge of the border, so you add padding-left of 5px to move it away. This then has the issue of adding 5px to the total width of the div meaning that it now sticks out slightly further than the one above and below.

text-indent only works on the first line of a text block.

It's a responsive div so set to 100% so can't subtract it from the total width.

Am i being stupid here and completely overlooking something?

 

[Flanders]

Have you tried adding the padding to the embedded element e.g. <p></p>?

 

[Dup]

Look up box-sizing: border-box:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

This will prevent padding adding width.

 

[kaku]

box-sizing: border-box;

This makes it so your block element will always be the specified width INCLUDING padding, borders, etc.

edit: snap, above xD