why resultant(after running html/css code) box sizes are different for div and a tag when applied the same set of properties?

Question

div, a {
    height: 100px;
    width: 200px;
    border: 5px solid black;
    margin: 15px;
}

<div>This is a div tag</div>
<a href="https://www.google.co.in" target="_blank">Google</a>

I expected to get the same size of boxes but found different ones.

divs are display block by default but anchors are display inline by default. Add **a{display:block}** so you can control the anchor — imvain2, Jun 07 '23 at 19:29

score 0 · Accepted Answer · edited Jun 07 '23 at 19:36

0

Just add display: block; to your CSS.

Like this:

div, a {
    display: block;
    height: 100px;
    width: 200px;
    border: 5px solid black;
    margin: 15px;
}

edited Jun 07 '23 at 19:36

M0nst3R

answered Jun 07 '23 at 19:29

Arman Moalemi

While this creates the expected result, it does not explain the problem. OP in my understanding is asking for an explanation rather than a solution. – connexo Jun 07 '23 at 19:40

1 Answers1