button按鈕自帶不可見的寬度屬性

CSS自動居中,必須對對象設置寬度才能生效。但是如果不對button設置寬度,加上以下CSS樣式,button也可以自動水平居中:

button {
    display: block;
    margin: 0px auto;
}

對照button的默認樣式如下:


	padding: 1px 6px;
	align-items: flex-start;
	text-align: center;
	cursor: default;
	color: buttontext;
	background-color: buttonface;
	box-sizing: border-box;
	padding: 2px 6px 3px;
	border-width: 2px;
	border-style: outset;
	border-color: buttonface;
	border-image: initial;
	text-rendering: auto;
	color: initial;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	margin: 0em;
	font: 400 13.3333px Arial;
	-webkit-writing-mode: horizontal-tb !important;
	-webkit-appearance: button;

如果對其他對象,添加以上CSS代碼,卻無法自動水平居中:


a {
	padding: 1px 6px;
	align-items: flex-start;
	text-align: center;
	cursor: default;
	color: buttontext;
	background-color: buttonface;
	box-sizing: border-box;
	padding: 2px 6px 3px;
	border-width: 2px;
	border-style: outset;
	border-color: buttonface;
	border-image: initial;
	text-rendering: auto;
	color: initial;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	margin: 0em;
	font: 400 13.3333px Arial;
	-webkit-writing-mode: horizontal-tb !important;
	-webkit-appearance: button;
	display: block;
	margin: 0px auto;
}

據此推測,button標籤應該自帶了不可見的寬度屬性。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章