如何在html中实现<p class =“...”>内的水平间距？</p>

Question

我有一个简单的菜单栏，只想要文本和超链接之间的水平间距。 这是我的代码：

<div id="rectangle">
<p class="x">Home Page
 <a href="hello">Home</a> <a href="user">user</a></p>
</div>

在样式字段中，我有

p.x {
        color: white;
        font:25px arial,sans-serif;
        position:relative;
        left:20px;
    }

#rectangle {
        width: 100%;
        height: 70px;
        background: deepskyblue;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 20;
    }

我希望在“主页”和“主页”/“用户”之间留出空间。

如果有人能帮助我，我感激不尽。

Answer 1

有几种解决方案。

尝试使用CSS“margin”或“padding”属性。

1. Margin
   
2. Padding

Answer 2

您可以为<a>提供一些水平边距。所以你可以这样做：

.x a:first-child {
  margin-left: 10px;
  }

但是，您可能想要查看如何正确制作导航按钮，如果这是您想要的。使用<nav>，您可以在html5中实现此目的。