legend標籤的一些糊塗賬

我也沒有想到，某一天，我竟然和legend標籤糾結起來了。

我在codepen上寫了一個原始demo:

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

能夠看到,legend右對齊了，可是margin-right卻木有生效！

why? why? why?

真是百思不得其解，因而進行了問題搜索，QQ羣求助，結果是彷佛沒人理我，或者理個人方式也不對，我想靜靜。

靜靜也不能解決個人疑問呀。。只能繼續搜尋，找緣由。

茫茫之中，一段文字引發了個人注意

http://www.w3schools.com/tags/tag_legend.asp 最下面

Default CSS Settings
Most browsers will display the <legend> element with the following default values:

Example

legend {
    display: block;
    padding-left: 2px;
    padding-right: 2px;
    border: none;
}

好的，大部分瀏覽器legend的默認樣式爲block！！！

block爲啥能實現右對齊？ block爲啥佔位跟inline-block同樣？我能將其重設爲inline嗎？一連串的問題，趕着讓我去本身測試。

測來又測去，發現了一個狀況：

legend標籤瀏覽器默認爲塊元素,而且CSS是不能修改其爲行內元素的（不一樣瀏覽器實現有差，但第一個legend均無論怎麼改，都是block）,但其佔位卻跟inline-block同樣。chrome下其可以響應text-align，我認爲這是一個bug，是不標準的。

呵了個呵，這legend標籤究竟是個什麼鬼！

最後，若是要實現最初demo的效果，使用float吧。

關於這個問題，我爲啥會糾結這麼久，我只想說：我不是認真，我就是想知道爲何！