圆形容器内图片无法正常居中，设置100%宽高正常但需保留侧边距

问题根源 #

1. 样式优先级冲突：代码中.header span, a, button规则权重高于.social-button，给所有a标签设置的padding:12px覆盖了.social-button的padding:0，同时float:left也破坏了.social-button的flex布局逻辑，导致内部子元素对齐失效。
2. 自定义图片样式未生效：你写的#kofi_img, #github_img选择器没有对应到HTML里的img元素，两个img标签都没有设置对应id，相关预留间距、居中的配置都没有实际作用。
3. 行内属性冗余：img标签上设置的height="84%" width="84%"没有配合适配规则，反而干扰了flex布局下的尺寸计算。

解决方法 #

调整样式规则，修复冲突后可实现图片居中+四周预留空白的效果，修改后的完整代码如下：

CSS代码

* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: "DM Sans", sans-serif;
  overflow: auto;
}
button, a {
  cursor: pointer;
}

.header {
  background-color: #f1f1f1;
  width: 100%;
  padding: 0.5% 5%;
}
.header-left, .header-right {
  color: var(--main-color);
  padding: 0 2%;
}

.menu {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.social {
  color: var(--main-color);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
}
/* 提升选择器权重，覆盖通用a标签的样式 */
.header .social-button {
  text-decoration: none !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 20px;
  position: relative;
  color: #1F1C2E;   /* 图标颜色 */
  border: 2px solid #1F1C2E;  /* 边框颜色 */
  padding: 4px; /* 此数值即为图片四周预留的空白大小，可自行调整 */
  float: none; /* 取消float对flex布局的影响 */
}

/* 匹配按钮内的图片，统一设置适配规则 */
.social-button img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保持图片比例不变形 */
}

.header span, button, .menu:not(.social-button) {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  border-radius: 4px;
}

HTML代码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
</head>

<body>
  <header class="header">
    <div class="header-left">
      <span id="name" class="name menu">mySite</span>
    </div>
    <div class="header-right">
      <div class="social">
        <a id="github" class="social-button menu" target="_blank" href="https://github.com">
          <img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub">
        </a>
        <a id="kofi" class="social-button menu" target="_blank" href="https://ko-fi.com">
          <img src="https://i.ibb.co/PCyyCY8/kofi.png" alt="kofi">
        </a>
      </div>
    </div>
    
  </header>
</body>

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