Tailwind中margin-bottom无法移动div，如何上移邮箱组件？

你用mb-*没效果是因为这个类是给元素下方添加外边距，只会让元素下方的内容远离它，没法让元素本身向上移动。想要把组件往上挪，可以试试这些Tailwind工具类：

1. 负margin-top类 #

直接给邮箱容器加-mt-*类（比如-mt-4、-mt-8，数值越大上移幅度越大），通过负外边距把元素往上拉，会影响周围元素的布局：

import React from 'react'

function Email() {
  return (
    <div className='flex justify-center w-full items-center mb-8'>
      <div className="mb-3 mx-auto xl:w-1/4 md:w-1/2 -mt-8">
        <input type="text" placeholder="example@email.com" className="p-3 rounded-l-md sm:w-2/3 font-['DM_Sans']" />
        <button type="button" className="p-3 bg-[#00ADC2] text-white font-semibold rounded-r-md sm:w-1/3 font-['DM_Sans']">Notify Me</button>
      </div>
    </div>
  )
}

export default Email

2. 变换类（Translate） #

用-translate-y-*类（比如-translate-y-4），通过CSS变换移动元素，不会影响其他元素的布局：

import React from 'react'

function Email() {
  return (
    <div className='flex justify-center w-full items-center mb-8'>
      <div className="mb-3 mx-auto xl:w-1/4 md:w-1/2 -translate-y-8">
        <input type="text" placeholder="example@email.com" className="p-3 rounded-l-md sm:w-2/3 font-['DM_Sans']" />
        <button type="button" className="p-3 bg-[#00ADC2] text-white font-semibold rounded-r-md sm:w-1/3 font-['DM_Sans']">Notify Me</button>
      </div>
    </div>
  )
}

export default Email

3. 调整父元素间距 #

如果父元素（外层flex容器）有多余的上边距或内边距，可通过-pt-*（负内边距）或-mt-*来减小上方空间，间接让子组件上移。

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