WordPress卡片间距异常求助（Kadence主题+Simple CSS）

我是WordPress新手，制作了两张卡片，在VSCode中显示正常，但在WordPress里两张卡片的间距异常，其余CSS样式均正常。使用的是Kadence主题和Simple CSS插件，尝试用margin替代gap属性，但没有任何变化。

我的HTML代码 #

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Effect</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://kit.fontawesome.com/95a02bd20d.js"></script>
</head>
<body>

<div class="container">
  <div class="card">
    <div class="face face1">
      <div class="content">
        <i class="fas fa-camera"></i>
        <h3 style="font-family:Didot, serif; ">PHOTOGRAPHIE</h3>
      </div>
    </div>
    <div class="face face2">
      <div class="content">
        <p style="font-family:Didot, serif; "> Chaque cliché devient une pièce maîtresse de votre stratégie</p>
        <a href="#" type="button">Read More</a>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <i class="fas fa-video"></i>
        <h3 style="font-family:Didot, serif; ">VIDEOGRAPHY</h3>
      </div>
    </div>
    <div class="face face2">
      <div class="content">
        <p style="font-family:Didot, serif; ">Propulsez votre marque et stimuler l'engagement .</p>
        <a href="#" type="button">Read More</a>
      </div>
    </div>
  </div>
</div>

<script src="index.js"></script>

</body>
</html>

我的CSS代码 #

body {
  display: flex;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #444;
  justify-content: center;
  align-items: center;
  font-family: arial;
}

.container {
  max-width: 700px; /* Adjust the maximum width as per your preference */
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  justify-content: center; /* Center the cards */
  gap: 40px; /* Add some space between the cards */
}


.container .card {
  flex: 1 1 calc(40% - 20px); /* Adjust the card width and keep some space between them */
  margin-bottom: 20px;
}

.container .card .face {
  width: 100%;
  height: 200px;
  transition: 0.4s;
}

/* Responsive styles for smaller screens */
@media only screen and (max-width: 768px) {
  .container {
    padding: 0;
  }

  .container .card {
    width: 100%;
    margin-left: 0;
  }
}

.container .card .face.face1 {
  position: relative;
  background: #333;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
  transition: transform 0.8s ease-in-out; /* Ajout de la transition */
  transform: translateY(100px); 
}

解决方法 #

1. 提升CSS选择器优先级 #

Kadence主题的默认样式可能覆盖了自定义CSS，给选择器加上主题内容区的前缀，确保样式生效：

/* 确保container的gap样式生效 */
.entry-content .container {
  gap: 40px !important;
}

/* 用margin替代gap的话，给卡片添加右侧margin，最后一张卡片去掉 */
.entry-content .container .card {
  margin-right: 40px;
}
.entry-content .container .card:last-child {
  margin-right: 0;
}

2. 避免WordPress自动添加p标签 #

WordPress会自动给换行的HTML插入<p>标签，导致卡片间多出不必要的间距。把卡片代码放在HTML块注释内，阻止自动格式化：

<!-- wp:html -->
<div class="container">
  <!-- 你的两张卡片代码 -->
</div>
<!-- /wp:html -->

3. 修复body样式冲突 #

给body设置的display: flex会和WordPress主题的body布局冲突，将这些样式移到自定义包裹容器上：

/* 替换原有body样式 */
.card-wrapper {
  display: flex;
  min-height: 100vh;
  background: #444;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

修改HTML结构：

<div class="card-wrapper">
  <div class="container">
    <!-- 卡片代码 -->
  </div>
</div>

4. 完善响应式布局 #

媒体查询中未将flex方向改为垂直，导致小屏幕下卡片挤在一起，补充代码：

@media only screen and (max-width: 768px) {
  .container {
    padding: 0;
    flex-direction: column;
    gap: 40px; /* 保持移动端卡片间距 */
  }

  .container .card {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0; /* 去掉底部margin避免重复间距 */
  }
}

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