基础CSS中div的height属性不生效？求可能原因

Hey there, let’s walk through the most common reasons your div’s explicit height isn’t working, even after you’ve set width and background color successfully:

• You accidentally changed the div’s display property
  Divs are block-level elements by default, which respect explicit height values. But if somewhere in your CSS (a global rule, a typo, or a parent element’s inheritance) you’ve set display: inline for this div, the browser will ignore your height declaration. Inline elements’ heights are controlled by their content and line-height, not explicit height settings. Double-check your styles for any rules overriding the default display: block on the div.

• There’s a typo in your CSS property name
  It’s an easy mistake to make! If you wrote heigth: 100px or hieght: 100px instead of height: 100px, the browser won’t recognize the property and will skip it entirely. Take a quick look at your CSS code to confirm the spelling is correct.

• A higher-specificity CSS rule is overriding your height
  Maybe another rule in your stylesheet (like an ID selector, a nested class, or an !important declaration) is setting a different height value for the div. Open your browser’s dev tools (press F12), inspect the div, and look at the "Styles" tab—if your height: 100px rule is crossed out, that means it’s being overridden by a more specific rule. The "Computed" tab will also show you the actual height being applied to the element.

• The div is a flex/grid item
  If your div is inside a flex container (display: flex) or grid container, the container’s default alignment properties might be overriding your explicit height. For example, flex containers use align-items: stretch by default, which makes flex items take the full height of the container regardless of your height setting. To fix this, you can set align-self: flex-start (or another value) on the div, or adjust the container’s align-items property.

• Unexpected inherited styles or resets
  While divs don’t have default height values from browsers, some CSS resets or parent element styles might introduce unexpected behavior. Using dev tools to inspect the div’s computed styles will quickly reveal if any inherited rules are interfering with your height setting.

A quick tip: Start with inspecting the element in dev tools—it’s the fastest way to see exactly what’s happening with your div’s styles.

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