想减少html标签之间不必要的空隙

Question

我正在使用 react 创建我的自定义 toast 通知，但标签之间存在不必要的间隙，因此
React 代码

import React from 'react'
import './CustomToast.css'
import {BsFillBellFill} from 'react-icons/bs'
import {ImCross} from 'react-icons/im'
function useCustomToast(title,message){
    const close = () =>{
        alert('closed')
    }
    return(
        <div className="notification">
            <div className="topPart">
                <div className="iconPoision">
                    <p><BsFillBellFill/></p>
                </div>
                <div className="notifiData">
                    <p><b>{title}</b></p>
                </div>
                <div className="crossPosition">
                    <p><button onClick={close} className="closeButton"><ImCross/></button></p>
                </div>
            </div>
            <div className="downPart">
                <p>{message}</p>
            </div>
        </div>
    )
}

代码的 CSS

.notification{
    top: 5px;
    right: 5px;
    background-color: rgba(0, 255, 234, 0.726);
    color: rgb(255, 255, 255);
    box-shadow: 2px 2px rgba(255, 255, 255, 0.562);
    box-sizing: border-box;
    position: fixed;
    border-radius: 5px;
    display: grid;
    grid-row-gap:2px;
    grid-template-rows: auto auto;   
}
.topPart{
    display: grid;
    grid-column-gap: 2px;
    grid-template-columns: 22px auto 25px;
}
.downPart{
    display: grid;
    grid-column: auto;
    grid-template-columns: auto;
    text-align: right;
}
.notifiData{
    text-align: left;
}
.iconPoision{
    text-align: center;
}
.closeButton{
    background-color: transparent;
    border: transparent;
    color: rgb(255, 255, 255);
    transition:ease-out;
}
.crossPosition{
    text-align: center;
}

所以，如果我删除它们之间的空间，通知面板会有点小，看起来只是一种通知类型

在顶行和底行之间看到如此多的空白

Answer 1

只需添加到您的“./CustomToast.css”并根据需要进行修改。

p { 
  padding: 0 0; 
  margin: 0 0;
}

将 p 更改为 div、span 等任何其他标签