如何在Jekyll（GitHub Pages）中为博客文章图片添加内边距

Hey there! Let's get that image padding sorted so your blog post text doesn't crowd against your images. Here's exactly what you need to do in your style.scss file:

Option 1: Target Only Blog Post Images (Recommended) #

This method ensures you don't accidentally add padding to other images on your site (like your header avatar). Look for the .post CSS block in your file (under the LAYOUT / SECTIONS section) and add an img rule inside it:

.post {
  blockquote {
    margin: 1.8em .8em;
    border-left: 2px solid $gray;
    padding: 0.1em 1em;
    color: $gray;
    font-size: 22px;
    font-style: italic;
  }

  // Add this new rule for post images
  img {
    padding: 15px 0; // Adjust values: use 0 15px for left/right padding, or 15px for all four sides
    box-sizing: border-box; // Optional: prevents padding from making images wider than their container
  }

  .comments {
    margin-top: 10px;
  }
  .read-more {
    text-transform: uppercase;
    font-size: 15px;
  }
}

Option 2: Global Image Padding (Affects All Site Images) #

If you want padding on every image across your site (including avatars, icons, etc.), modify the existing img rule in the BASE RULES section:

img {
  max-width: 100%;
  padding: 15px; // Adds padding to all four sides; tweak to your preference
  box-sizing: border-box; // Optional but helpful to keep images within their containers
}

Feel free to adjust the 15px value to match your design—you can use different values for vertical vs horizontal spacing (e.g., 10px 15px for top/bottom and left/right padding).

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