如何增加字体真棒图像的边距

Question

图像处于h1编辑边距h1仅编辑边距 - 左边增加图像左侧的边距。试图增加i元素的余量在i元素上也没有任何作用。

  <h1 class="display-4"><i class="fas fa-camera-retro"></i>The Image Gallery</h1>
           <p> A bunch of beautiful images that I didn't take</p>

我想增加相机图标和文字之间的空间。

Answer 1

增加i元素的边距可以正常工作：

＆＃13;

＆＃13;

i {margin-right:20px}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 class="display-4"><i class="fa fa-camera-retro"></i>The Image Gallery</h1>
           <p> A bunch of beautiful images that I didn't take</p>

＆＃13;

＆＃13;

＆＃13;

您可以检查元素并找到确切覆盖您的风格的内容 但最好的方法是在SO发布一个问题，肯定。

Answer 2

Just apply the mr-3 class to the icon like so:

<h1 class="display-4"><i class="fas fa-camera-retro mr-3"></i>The Image Gallery</h1>
<p> A bunch of beautiful images that I didn't take</p>

mr-3 means "margin-right 3 units".

By default, Bootstrap gives you 5 options for margin and padding classes i.e. choose a number between 1 and 5. And of course, the number 0 will zero things out.