如何在CSS中实现一行内图片的均等间距？

Hey there! Let’s work through that equal spacing issue between your images. The .et_pb_row code you shared is handling your container’s width and centering, but the spacing problem is most likely tied to how your images (or their parent elements) are laid out inside this row. Here are a few solid solutions to fix this:

Solution 1: Use Flexbox for Simple Equal Spacing #

Update your .et_pb_row to use flexbox—it’s made for this kind of even distribution:

.et_pb_row {
  position: relative;
  width: 80%;
  max-width: 1080px;
  margin: auto;
  display: flex;
  gap: 1.5rem; /* Tweak this value to get your ideal spacing */
  /* Optional: If you want images to stretch to fill the row with even space between */
  justify-content: space-between;
}

• gap adds consistent, equal space between all direct children (your images or their wrappers)
• justify-content: space-between will push images to the row’s edges and distribute any extra space evenly between them

Solution 2: CSS Grid for Precise Column Control #

If you want more control over responsive columns while keeping equal spacing, go with CSS Grid:

.et_pb_row {
  position: relative;
  width: 80%;
  max-width: 1080px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjust min width to fit your design */
  gap: 1.5rem; /* Equal space between both rows and columns */
}

This setup will automatically adjust the number of columns based on screen size, while keeping uniform spacing between every image.

Solution 3: Reset Image Margins/Padding First #

If your images have inconsistent default margins or padding, reset those first to avoid conflicting with your row layout:

.et_pb_row img {
  margin: 0;
  padding: 0;
  width: 100%; /* Ensures images fill their container without overflow */
}

Pair this with either the Flexbox or Grid solution above to make sure spacing only comes from your row’s layout rules.

Quick Troubleshoot Tip: #

Double-check if your images are direct children of .et_pb_row—if they’re inside wrapper divs, make sure those wrappers don’t have extra margins that would throw off the even spacing.

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