html - Gmail 右侧边距与左侧边距不一样

Question

我有一个从内容生成 html 的注释编辑器，我有一个图像工具，用户可以在其中添加插图，就像左边距和右边距一样移动图像但是当我使用左边距时它工作正常但是当我尝试向右添加边距，然后 gmail 不显示正确的边距（值是正确的，但在视觉上它不匹配）

html

       <div
        style={{
          width: "{{full_width_percent_override}}", // Evaluates to 100%
          textAlign: "right", 
        }}
      >
      
              <figure
                style={{
                  width: "{{full_width_percent_override}}", // Evaluates to 100%
                  display: "inline-block",
                  marginTop: "0px",
                  marginBottom: "0px",
                  marginRight: `${Math.abs((inset < 0 ? inset : 0) * 16)}px`,
                  marginLeft: `${Math.abs((inset > 0 ? inset : 0) * 16)}px`,
                }}
              >
                <a
                  href={url as string}
                  style={{
                    border: "none",
                    display: "inline-block",
                    height: "auto",
                    marginTop: "0px",
                    marginBottom: "0px",
                    marginRight: `${Math.abs((inset < 0 ? inset : 0) * 16)}px`,
                    marginLeft: `${Math.abs((inset > 0 ? inset : 0) * 16)}px`,
                    padding: "0",
                    textDecoration: "none",
                    width: "auto",
                  }}
                >
                  <img
                    alt={altText as string}
                    style={{
                      border: "none",
                      display: "block",
                      height:
                        height && width < IMAGE_MAX_WIDTH_EMAIL
                          ? (height as string)
                          : "auto",
                      margin: "0 auto",
                      maxWidth: IMAGE_MAX_WIDTH_EMAIL,
                      verticalAlign: "middle",
                      width: width,
                    }}
                    src={url as string}
                  />
                  {caption ? (
                    <figcaption
                      style={{
                        textAlign: alignOption ? alignOption : "center",
                        color: captionColor
                          ? (captionColor as string)
                          : "#8c8d91",
                        fontSize: "1rem",
                        paddingLeft: "0.2em",
                        paddingRight: "0.2em",
                        marginTop: "1em",
                        marginBottom: "1em",
                      }}
                    >
                      {caption}
                    </figcaption>
                  ) : null}
                </a>
              </figure>
      </div>

    ```






Image with margin right
  [1]: https://i.stack.imgur.com/O4wGK.png
Image with margin left
  [2]: https://i.stack.imgur.com/CzDQH.png

标签： htmlcssemail