嗨，我想弄清楚如何匹配我的figma设计到我的react web应用程序，我试图增加标题选项之间的空白间距有人知道如何做到这一点吗?谢谢!
Figma图片链接:https://i.stack.imgur.com/yXGiA.jpg
当前web应用:https://i.stack.imgur.com/yXGiA.jpg
代码:
import styled from 'styled-components';
import LinkButton from '../../../components/LinkButton';
import { theme } from '../../../styles/theme';
export const HeaderWrapper = styled.header`
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
height: 71.5px;
width: 100%;
padding: 80px 38px 0 50px;
margin-bottom: 100px;
`;
export const Logo = styled.img`
margin-left: 43px;
height: 73px;
width: 260px;
margin-top: 10px;
`;
export const NavBar = styled.nav`
margin-right: 43px;
display: flex;
padding-top: 5px;
a {
margin-left: 57px;
text-transform: uppercase;
font-size: 14px;
font-family: ${({ theme }) => theme.font.font3.new};
font-weight: ${({ theme }) => theme.fontWeight.med_700};
}
a:first-of-type {
margin-left: 0px;
}
`;
export const NavButton = styled(LinkButton)`
margin-left: 52px;
text-transform: uppercase;
font-size: 14px;
font-family: ${({ theme }) => theme.font.font3.new};
font-weight: ${({ theme }) => theme.fontWeight.med_700};
`;
export const customStyles = {
overlay: {
backgroundColor: 'rgba(30, 30, 30, .9)',
},
content: {
position: 'absolute',
width: '460px',
height: '718px',
top: '50%',
left: '50%',
background: '#111',
border: `4px solid ${theme.colors.modal.border}`,
borderRadius: '15px',
boxSizing: 'border-box',
transform: 'translate(-50%, -50%)',
},
};它可以有很多方法，你可以通过给固定宽度的列表在头部或使用网格系统，如给列每个我认为你应该做填充。给x轴上的标签填充，这将是一个很好的选择。
考虑将a标签作为导航栏中的每个项目
a {
//added code
padding-right:40px;
padding-right:40px;
margin-left: 57px;
text-transform: uppercase;
font-size: 14px;
font-family: ${({ theme }) => theme.font.font3.new};
font-weight: ${({ theme }) => theme.fontWeight.med_700};
}