Twenty-Twenty主题（TT）边距过大及布局优化问题：如何自定义调整？

Let’s work through each of your problems one by one—Twenty-Twenty has some opinionated default styles that can clash with custom layouts and plugins, but we can override them with targeted CSS:

1. Setting Custom Column Widths (Using Simple CSS) #

The default Columns block variants don’t play nicely with a true four-column layout in Twenty-Twenty, so we’ll use custom CSS to fix this. Here’s how:

• First, add a custom CSS class to your Columns block:
  1. Select the Columns block in Gutenberg
  2. Go to the "Advanced" panel in the right sidebar
  3. Enter custom-four-columns in the "Additional CSS class(es)" field
• Next, go to Appearance > Simple CSS and paste this code:

/* Custom four-column layout for Twenty-Twenty */
.custom-four-columns.wp-block-columns {
  gap: 2rem; /* Adjust spacing between columns as needed */
}

.custom-four-columns .wp-block-column {
  flex: 1; /* Makes all columns equal width */
  max-width: 25%; /* Enforces exact 25% width per column */
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
  .custom-four-columns .wp-block-column {
    max-width: 100%;
    flex-basis: 100%;
  }
}

This overrides Twenty-Twenty’s default column widths and ensures your four columns are evenly spaced and sized.

2. Fixing Border & Margin Issues #

Twenty-Twenty adds generous padding, margins, and borders to blocks by default—here’s how to tone them down:

a. Reducing Oversized Borders #

If your Columns block has a border that’s too thick, add this to Simple CSS:

/* Remove or adjust Columns block border */
.custom-four-columns.wp-block-columns {
  border: none; /* Use this to remove border entirely */
  /* Or adjust border size: border: 1px solid #ddd; */
}

b. Fixing Excessive Margins/Padding #

To tighten up the spacing inside and around your columns:

/* Reduce padding inside columns */
.custom-four-columns .wp-block-column {
  padding: 1rem; /* Adjust from Twenty-Twenty's default 2rem */
}

/* Reduce top/bottom margins on the Columns block */
.custom-four-columns.wp-block-columns {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

3. Resolving WP Job Manager Layout Breakage #

WP Job Manager’s default styles can conflict with Twenty-Twenty’s centered, wide-layout defaults. Add this CSS to fix the misalignment and oversized margins:

/* Fix WP Job Manager layout in Twenty-Twenty */
.job_listings {
  max-width: 1200px; /* Match Twenty-Twenty's content width */
  margin: 0 auto; /* Keep centered but not overly spaced */
  text-align: left; /* Prevent excessive centering of elements */
}

.job_listing {
  margin-bottom: 1.5rem; /* Reduce large gaps between listings */
  padding: 1rem; /* Tighten up internal padding */
}

/* Fix any button/element alignment issues */
.job_listing .job_meta,
.job_listing .job_title {
  text-align: left;
}

You can tweak the max-width, margin, and padding values to match your preferred look.

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