如何去除国旗元素周围的内边距？解决父容器包裹子元素间距问题

当前你的父容器.flex默认是块级元素，宽度占满整个页面，再加上justify-content: center属性，导致子元素居中后左右出现大量空白。要让父容器紧密包裹子国旗元素，只需调整容器的宽度和对齐逻辑：

修改后的CSS代码 #

.flex {
  display: flex;
  border: 5px dashed black; /* 合并边框属性，避免样式覆盖问题 */
  width: fit-content; /* 让容器宽度自适应子元素总宽度 */
  margin: 0 auto; /* 如需整体居中，用margin实现，不影响容器自身宽度 */
  padding: 0;
}

.box1 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 40px 0 0 40px;
}

.box2 {
  height: 200px;
  width: 100px;
  background-color: whitesmoke;
}

.box3 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 0 40px 40px 0;
}

关键修改说明 #

• width: fit-content：让父容器自动收缩到刚好包裹所有子元素的宽度，直接消除左右多余空白。
• 移除justify-content: center：改用margin: 0 auto实现整体居中，既保证国旗在页面居中，又不会让父容器过度拉伸。
• 合并边框属性：原代码中border、border-color、border-style分开写容易出现样式覆盖，合并为border: 5px dashed black更简洁可靠。

HTML结构无需修改，保持原样即可。

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