Html&css Bug

It's been a long time. Html,css, today I would like to borrow this blog to the previous encounter of these several bugs to tidy up

1.a label tag with img

We all know that a tag is a block element, so when you put an IMG tag inside a tag, everyone will change the properties of a tag display:inline-block or display:-block, think this is good, you can look at the following example

Can clearly see the picture and a label a little space between, I was in Google saw a gap of 3px. I thought when I turned it into a block element, it was like the picture in the Div, and the width was decided by the picture inside. Why this gap, on the internet for a long time have not found the ideal answer.

The solution: is the picture floating inside, this small gap will not be

2.margin Bug

Margin is also a more commonly used property in a style, but it also has bugs in the following example

Style:

. box1{width:100px;height:100px;background:red;}
. Box2{width:100px;height:100px;background:pink;}
. Box3{margin-top:20px;width:100px;height:80px;background:blue;}

Html:

<div class= "Box1" ></div>

<div class= "Box2" >

<div class= "Box3" > I just want to keep the distance with my father </div>
</div>

The code is to keep the top margin of the box3 and the parent element box2 above the distance, but the top margin is in the Box1 and Box2, the top margin is clearly given in the BOX3 results and box did not have a half-dime relationship, remember that I also for this box3 record straight for a long time, is not found in is what reason.

The solution to the problem: this I really do not have a fundamental solution, there is only one way to avoid, such as a parent-child box you want the top margin of the box, the parent box into a content box and then give it the inner margin ( box-sizing:border-box; padding-top:30px; ）

Html&css Bug