前端 margin 对比

尺寸

margin top

实时编辑器

function MarginTop(props) {
    let  arrList = [
      
    ]
    for (let i =0;i <100;i ++){
        arrList = [...arrList,{
            marginTop: {
                marginTop: i+'px',
                padding:0
            },
            i :i 
        }]
    }
    const concatPx = (item)=>{
        
        return 'margin top '+item +'px'
    }
    const [listSize,setListSize] = useState([])
    useEffect(() => {
         for (let i=10;i <100;i ++){
             setListSize(...listSize,i)
         }
         
         
    }, [])
    return <div style={{cursor:'pointer'}}>
      
        {
            arrList.map(item=>{
                return <div key={item.i} style={item.marginTop} title={concatPx(item.i)}  > 正 <sup>{concatPx(item.i)} </sup></div>
            })
        }
    </div>
}

结果

Loading...

margin right

实时编辑器

function MarginRight(props) {
    let  arrList = [
      
    ]
    for (let i =0;i <100;i ++){
        arrList = [...arrList,{
            marginTop: {
                marginRight: i+'px',
                padding:0
            },
            i :i 
        }]
    }
    const concatPx = (item)=>{
        
        return 'margin right '+item +'px'
    }
    const [listSize,setListSize] = useState([])
    useEffect(() => {
         for (let i=10;i <100;i ++){
             setListSize(...listSize,i)
         }
         
         
    }, [])
    return <div style={{cursor:'pointer'}}>
      
        {
            arrList.map(item=>{
                return <span key={item.i} style={item.marginTop} title={concatPx(item.i)}  > 正 </span>
            })
        }
    </div>
}

结果

Loading...