Float left与display inline失效求助：顶部padding丢失及布局异常

Hey there! Let's break down what's going wrong here and fix those issues one by one.

1. Why float: left isn't working & padding-top: 10% seems missing? #

The core issue starts with your .outer element having display: inline:

• Inline elements can't properly contain floated elements—floats will break out of the inline container's normal flow, making your float rules ineffective.
• Vertical padding (padding-top/padding-bottom) on inline elements doesn't expand the container's height. It only affects line height, which makes the padding look like it's "missing" visually.

2. Why does display: inline push all elements to the far left? #

display: inline turns elements into inline-level boxes, which behave like text characters—they line up in a single row without wrapping, and don't take up full horizontal space. That's why your .galleryouter elements are squeezed together on the left.

Fixed Code Solution #

Here's the adjusted CSS that resolves all your issues:

/* Switch to inline-block: allows side-by-side layout while containing blocks/floats */
.outer { 
  display: inline-block; 
  padding-right: 5%; 
  padding-left: 5%; 
  width: 100%; /* Optional: ensures container fills parent width instead of shrinking */
} 

.galleryouter { 
  float: left; /* Enable floating for side-by-side grid layout */
  padding-top: 10%; 
  padding-right: 5px; 
  padding-left: 5px; 
  width: 30%; 
  margin: 0 1.5%; /* Optional: adds spacing so 3x30% elements fit 100% width */
  border: 2px solid black; 
  border-radius: 8px; 
  box-sizing: border-box; /* Critical: includes padding/border in the 30% width to prevent overflow */
} 

.gallerypicture { 
  width: 100%; 
} 

.galleryname { 
  width: 100%; 
}

Key Adjustments Explained #

• Changing .outer from display: inline to inline-block (or block if you don't need it alongside other inline elements) lets it properly contain floats and respect vertical padding.
• Adding float: left to .galleryouter enables the horizontal grid layout you likely want.
• box-sizing: border-box ensures padding and border don't make the element wider than 30%, preventing unexpected wrapping or overflow.
• The optional margin: 0 1.5% ensures three 30% width elements fit perfectly across the container (30%×3 + 1.5%×2 = 100%).

If you were aiming for a photo gallery grid, this setup should fix all the broken behaviors you mentioned. Feel free to tweak the margins or widths if you need different spacing!

内容的提问来源于stack exchange，提问作者Oliver.Kirkpatrick