React.js，显示两个相邻的 Svg 图像，中间有空格答案

【问题标题】：React.js, Displaying Two Svg Images Next To Each Other With Space In BetweenReact.js，显示两个相邻的 Svg 图像，中间有空格
【发布时间】：2020-08-23 06:29:57
【问题描述】：

import React from "react";
import python from "../svg/python.svg";
import java from "../svg/java.svg";

function App() {
  return (
    <div>
      <img src={python} alt="python" height="50" />
      <img src={java} alt="java" height="70" />
    </div>
  );
}

所以我试图将这两个 svg 图标并排显示，但是当它们渲染时，它们彼此非常接近。我如何在它们之间适当地放置一些空间，以使它们的边界不那么紧密？

【问题讨论】：

你试过什么？您是否尝试在组件中添加一些 CSS？
@DennisVash 我尝试了 img 的borderRadius 属性，但似乎没有任何改变。我也尝试过leftMargin，rightMargin，但我看不出有什么区别。另外，我也没有创建 svg 组件，我试图在不创建 svg 组件的情况下做到这一点。
您应该向我们展示您的尝试，最好添加一个代码框示例

标签： reactjs svg jsx

【解决方案1】：

这是您可以做到的一种方法。将 css 文件添加到您的 src 文件夹。给它一个名字。这里我将其命名为 App.css。

App.css

在其中创建一个名为 distance 的类。

.distance{
  margin-right: 50px;
}

然后在您的 App.js 中将此 css 文件导入为：

导入“./App.css”

然后在您的第一张图片中使用 distance 类，如下所示：

function App() {
  return (
    <div>
      <img src={python} alt="python" height="50" className="distance" /> 
      <img src={java} alt="java" height="70" />
    </div>
  );
}

【讨论】：