Child a tag width 100% to the parent width in this case not working

July 16, 2022

I am trying an a tag take all 100% width of the parent but anything works. I tried with div tag and p tag and it works, do not know if i am missing something with a tags

html

<div >
  <a href="">dsa</a>
</div>

css

div {
   background: red;
   width: 500px;
   height: 20px;
}

div a {

  width: 100%;
  border: 4px solid black;
}

Codepen

>Solution :

Change display: inline-block for a tag.

div {
  background: red;
  width: 500px;
  height: 20px;
}

div a {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  line-height: 100%;
  border: 4px solid black;
}