css - 要素を高さ0pxに設定するには?

Question

要素の高さを初期値から 0px に動的に変更したいのですが、パディングのために機能していないようです。私が間違っていることを言うことはできません。

使用したくない: 表示: ブロックまたは非表示。高さが 0 のときにスタイルからパディングを削除したくないのは、このロジックが複雑になりすぎるためです。ここで愚かで簡単に修正できることを願っています。それが機能しない理由です。何か案は？

より多くのコンテキストのために追加しています。リアクトです。コードを簡略化しましたが、これは基本的な考え方です。そして、このモーダルをサイズ変更可能にしたいと思います。ので、私は持っています ：

const StyledModal = styled.div<ModalProps>`
  box-sizing: border-box;
  position: fixed;
  z-index: 9000;
  background-color: white;
  height: ${({ height }) => `${height}px`};
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 3.4rem 0 3.2rem 0;
`
const Modal = ({children}) => {
  const [height, setHeight] = useState(0)
  useEffect(() => { 
    setHeight(ref && 
    ref.current && 
    ref.current.getBoundingClientRect().height)
  }, [])

  const reduceHeight = () => setHeight(0) 
  return <StyledModal 
          onClick={reduceHeight} 
          height={height}>{children}</StyledModal>

}

問題は、web 開発者ツールで高さを手動で 0px に設定しても、上のスクリーンショットのようにこのパディングのためにこの要素が存在することです。