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标签应该自带了不可见的宽度属性。

你可能感兴趣的:(前端)