css - Why won't top padding apply to my anchor? -

css - Why won't top padding apply to my anchor? -

i have anchor within div within div. reason, top padding won't apply it, bottom , side padding will. know why?

class="snippet-code-css lang-css prettyprint-override">* { margin: 0; padding: 0; } .box { border: 1px solid blue; padding: 60px 15px; } class="snippet-code-html lang-html prettyprint-override"><div class="wrapper"> <div class="box"> <a>test</a> </div> </div>

it doesn't work because default a inline element. if want treat block one, should create block or inline-block (recommended in case):

class="snippet-code-css lang-css prettyprint-override">* { margin: 0; padding: 0; } .box { border: 1px solid blue; padding: 60px 15px; display: inline-block; } class="snippet-code-html lang-html prettyprint-override"><div class="wrapper"> <div class="box"> <a>test</a> </div> </div>

being inline element, a rendered on content baseline. though padding-top/bottom values applied (unlike margin-top/bottom ignored inline elements), increased padding causes alter of height of element. despite of height (which ignored) inline element still rendered on baseline, that's why changing padding-top/bottom doesn't shift element visually.

css