What would be the total width of the div in the code below? style="margin:20px; border:solid 3px #888888;">

a) 300px
b) 404px
c) 323px
d) 346px

The answer to this question is given below in the explanation section.

Explanation:

The correct answer to this question is d- 346px.

The complete code of this example is given below:

<div>

style="margin:20px; border:solid 3px #888888;">

</div>

while the image width is 300px.

It is noted that the image width is 300px and the margin is 20 px.

Margin:20px means that image margin from four side is 20 px each.

So the width of dive from both side increase to 40 px and the image has 300 px, then total width becomes 340px. Now the border also has 3px of four sides of the image, then the width of the border becomes 6px.

so the total width of the div tag is 346 px.

In short, we can calculate the width of tag as below:

total width of div= width of image+ width of margin+ width of border

total width of dive= 300px+40px+6px

total width of div=346px.