HTML输入元素居中问题：margin-right失效，box-sizing无法解决

你的问题核心出在全局通配符*的不合理样式设置：

• * { margin:40px; padding:10px; }会给页面所有元素（包括body、input、button）强制添加固定内外边距，彻底打乱了布局的默认计算逻辑，导致input的宽度和位置偏移。
• 即便给input添加了box-sizing:border-box，也抵消不了全局样式带来的额外边距干扰，所以才会出现右侧外边距失效、元素偏右的情况。

步骤1：修正全局样式 #

不要给所有元素统一设置大边距，改用更合理的基础重置，确保布局不受强制样式干扰：

/* 替换原有的*选择器样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 全局统一盒模型，避免重复设置 */
}

步骤2：实现input水平居中 #

推荐两种常用且可靠的实现方式：

方法一：margin:auto + 固定宽度

给input设置宽度后，通过左右自动外边距实现居中：

body {
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  border: 2px solid #5f9341;
  width: 80%; /* 可替换为固定值如300px */
  margin: 40px auto; /* 上下边距40px，左右自动居中 */
  padding: 10px; /* 单独给input设置内边距 */
  display: block; /* 块级元素才能触发margin:auto居中 */
}

button {
  margin: 0 auto 40px; /* 按钮同步居中，按需调整 */
  display: block;
  padding: 10px 20px;
}

方法二：Flex布局（更灵活）

给body设置Flex布局，快速实现子元素居中：

body {
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column; /* 垂直排列input和button */
  align-items: center; /* 水平居中所有子元素 */
  gap: 20px; /* 元素间的间距 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  border: 2px solid #5f9341;
  width: 80%;
  padding: 10px;
}

button {
  padding: 10px 20px;
}

修正后的完整代码 #

CSS：

body {
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  border: 2px solid #5f9341;
  width: 80%;
  padding: 10px;
}

button {
  padding: 10px 20px;
}

HTML：

<html>
<head>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js"></script>
</head>
<body>
  <input type="text" id="input-el">
  <button id="input-btn">SAVE INPUT</button>
</body>
</html>

• 禁止给*选择器设置强制的margin和padding，这会影响所有元素的布局逻辑，应该用统一盒模型和基础重置替代。
• 块级元素实现水平居中，需要display:block配合margin:auto；Flex布局则更适合批量元素的居中需求。
• box-sizing:border-box的作用是让内边距、边框纳入宽度计算，但前提是没有其他全局样式干扰布局。

内容的提问来源于stack exchange，提问作者Amar Mesic