Some of the Most‑Misunderstood Properties in CSS

Many properties in CSS can be misunderstood, but here are twenty that ‑ in my experience ‑ are most commonly misunderstood:

1. display

On an ordinary span, display: inline does not make width and height behave as they do on a block. I cover display in my article here: "Using display in CSS".

2. float

A float leaves normal block flow, but nearby inline content can still wrap around it. You can read my article on CSS float (and how to clear it) here: "How to Use and Clear the CSS float Property".

3. position

position: relative keeps its original space in normal flow, whereas position: absolute takes the box out of that flow. I've written about using CSS position here: "Positioning in CSS", and a more in‑depth look specifically at position: sticky here.

4. overflow

overflow: hidden clips content without removing it, and the element can still be scrolled programmatically. You can read more about overflow and how to use it here: "The CSS overflow Property".

5. z-index

z-index is easy to misapply because it applies to positioned elements and also to flex and grid items; the result still depends on stacking contexts.

6. box-sizing

With box-sizing: border-box, the declared size includes padding and borders. Margins remain outside that size. You can read more in my article here: "CSS box-sizing: Controlling the Element Box Model".

7. visibility

visibility commonly uses visible and hidden, and also defines collapse for table rows, columns, and some layout contexts.

8. opacity

opacity is often misread because it composites an element and its descendants as a group. A child cannot cancel a parent's opacity by setting its own value to 1.

9. transition

transition controls how an animatable value changes; it does not supply the destination value for you. Read more here: "Understanding CSS Transitions", and more about the difference between transition and @keyframes here.

10. transform

transform: translateX(20px) moves the element visually without moving its original space in normal flow. Find out more here: "Manipulate Elements with CSS transform".

11. animation

An animation does not automatically keep its final frame after it ends. That depends on animation-fill-mode. Read more about animating with CSS here:

• "Mastering CSS Animations with @keyframes".
• "Understanding CSS Transitions".
• "CSS Animations: Transitions vs. Keyframes".

12. flexbox

In flexbox, justify-content follows the main axis set by flex-direction; it is not always horizontal. Read more in my article here: "Understanding and Using Flexbox in CSS".

13. grid

The direct, in‑flow children of a grid container become grid items. Nested descendants do not automatically become items in that same grid. I have written about this in detail here: "How to Use grid in CSS", and how it compares to flex here: "Flexbox vs. grid".

14. calc()

calc() can combine compatible units, but its syntax still matters: binary + and - operators need spaces on both sides. Read more here: "Dynamic Calculations in CSS Using calc()".

15. vh and vw

These length units are often misunderstood because they are based on the viewport size, rather than the size of the element or its parent. I write specifically about vh and vw units here: "Using Viewport Units in CSS: vw and vh", and about viewport units in more detail here: "Exploring CSS Viewport Units Beyond vw and vh".

16. Media Queries

A width media query measures the viewport in CSS pixels. A narrow viewport does not, by itself, tell you whether someone is using touch or a mouse. Read about how to use them here: "Understanding Media Queries in CSS".

17. !important

!important changes a declaration's place in the cascade; it does not automatically beat every other important declaration. I've written about this previously: "!important in CSS".

18. :hover

:hover can match any element under a pointing‑device hover condition, not only links. It should not be the only way to expose essential interaction because touch devices may not provide stable hover.

19. :before and :after

::before and ::after generate boxes inside an element, before or after its content. They do not insert DOM elements. I go into this in detail here: "::before and ::after Pseudo‑Elements in CSS".

20. @keyframes

@keyframes can define one or more explicit keyframe blocks. Omitted start or end values come from the element's computed style; multiple explicit keyframes are common, not a grammar requirement.