Some confusion about legend tag_html/css_WEB-ITnose

I didn’t expect that one day, I would actually get entangled with the legend tag.

I wrote an original demo on codepen:

http://codepen.io/myqianlan/pen/RPaxGJ

As you can see, the legend is right-aligned. But margin-right does not take effect!

why? why? why?

I was really puzzled, so I searched for the problem and asked for help in the QQ group. The result was that no one seemed to care about me, or the way they treated me was wrong. , I want to be quiet.

Jingjing can’t solve my doubts. . We can only continue searching to find the reason.

Amidst the confusion, a piece of text caught my attention

http://www.w3schools.com/tags/tag_legend.asp Bottom

Default CSS SettingsMost browsers will display the <legend> element with the following default values:Examplelegend {    display: block;    padding-left: 2px;    padding-right: 2px;    border: none;}

Okay Yes, the default style of legend in most browsers is block! ! !

Why can block be right aligned? Why does block occupy the same space as inline-block? Can I reset it to inline? A series of questions prompted me to test it myself.

After testing again and again, I found a situation:

The legend tag browser defaults to a block element, and CSS cannot modify it to an inline element (the implementation of different browsers is different, But no matter how you change the first legend, it is still a block), but its occupancy is the same as inline-block. It can respond to text-align under chrome. I think this is a bug and non-standard.

Haha, what the hell is this legend tag!

Finally, if you want to achieve the effect of the original demo, use float.

As to why I have struggled with this issue for so long, I just want to say: I’m not serious, I just want to know why!