如何为段落添加边距？

Question

我想建立一个网站，我是带边框的段落。我在css上尝试了保证金，但是没有用。如何制作段落保证金？

这是我的HTML代码：

body{
    margin:0px;
    font-family:Calibri;
    background-color:#58d68d ;
}

/* Navigation Bar */
ul{
    margin:0px;
    padding:0px;
    overflow:hidden;
    background-color:white;
    top:0px;
    width:100%;
}
li.brand{
    margin-left:100px;
}
li.active{
    background-color:#FAFAFA;
}
li.right{
    float:right;
}
li.right-space{
    float:right;
    margin-right:100px;
}
li{
    float: left;
}
li, a{
    font-size:18px;
    display:block;
    color:#58d68d;
    text-align:center;
    padding:7px 12px;
    text-decoration:none;
    transition:0.4s;
}
li:hover, a:hover{
    background-color:#FAFAFA;
}

/* Intro */
h1{
    margin-top:20px;
    margin-left:100px;
    font-size:100px;
    color:white;
    margin-bottom:0px;
}
h2{
    margin-top:0px;
    margin-bottom:50px;
    margin-left:100px;
    color:white;
    max-width:1000px;
    opacity:0.7;
}

/* Packs Section */
div.packs{
    width:100%;
    height:500px;
    background-color:white;
}
p{
    margin:50px;
    display:inline;
    padding:7px 12px;
    border-left:6px solid red;
    background-color:lightgrey;
}

<!-- Navigation Bar -->
<nav>
    <ul>
        <!-- Left -->
        <li class="brand"><a href="http://www.packet.ml">Packet.ml</a></li>
        <li class="active"><a href="#">About</a></li>
        <!-- Right -->
        <li class="right-space"><a href="#home">Application</a></li>
        <li class="right"><a href="#home">Download</a></li>
        <li class="right"><a href="#home">Packets</a></li>
    </ul>
</nav>

<!-- Intro -->
<header>
<h1>Packet</h1>
<h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>

<!-- Packs Section -->
<section>
<div class="packs">
<p>Edition Packet</p>
<p>Full Packet</p>
<p>User Pro Packet</p>
</div>
</section>

我尝试了margin:50px;，但没有成功。此命令仅在margin-left和right上执行。

有什么想法吗？

Answer 1

margin无法使用内嵌元素，您要设置p，因此将p设置为inline-block

＆＃13;

＆＃13;

body {
  margin: 0px;
  font-family: Calibri;
  background-color: #58d68d;
}
/* Navigation Bar */

ul {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: white;
  top: 0px;
  width: 100%;
}
li.brand {
  margin-left: 100px;
}
li.active {
  background-color: #FAFAFA;
}
li.right {
  float: right;
}
li.right-space {
  float: right;
  margin-right: 100px;
}
li {
  float: left;
}
li,
a {
  font-size: 18px;
  display: block;
  color: #58d68d;
  text-align: center;
  padding: 7px 12px;
  text-decoration: none;
  transition: 0.4s;
}
li:hover,
a:hover {
  background-color: #FAFAFA;
}
/* Intro */

h1 {
  margin-top: 20px;
  margin-left: 100px;
  font-size: 100px;
  color: white;
  margin-bottom: 0px;
}
h2 {
  margin-top: 0px;
  margin-bottom: 50px;
  margin-left: 100px;
  color: white;
  max-width: 1000px;
  opacity: 0.7;
}
/* Packs Section */

div.packs {
  width: 100%;
  height: 500px;
  background-color: white;
}
p {
  margin: 50px;
  display: inline-block;
  padding: 7px 12px;
  border-left: 6px solid red;
  background-color: lightgrey;
}

＆＃13;

<!-- Navigation Bar -->
<nav>
  <ul>
    <!-- Left -->
    <li class="brand"><a href="http://www.packet.ml">Packet.ml</a>
    </li>
    <li class="active"><a href="#">About</a>
    </li>
    <!-- Right -->
    <li class="right-space"><a href="#home">Application</a>
    </li>
    <li class="right"><a href="#home">Download</a>
    </li>
    <li class="right"><a href="#home">Packets</a>
    </li>
  </ul>
</nav>

<!-- Intro -->
<header>
  <h1>Packet</h1>
  <h2>Any application, software programm or game in one place! Packets everywhere!</h2>
</header>

<!-- Packs Section -->
<section>
  <div class="packs">
    <p>Edition Packet</p>
    <p>Full Packet</p>
    <p>User Pro Packet</p>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在使用display: inline;代替段落，请尝试使用display: inline-block;。

以下是一个工作示例：

＆＃13;

＆＃13;

body {
  margin: 0px;
  font-family: Calibri;
  background-color: #58d68d;
}
/* Navigation Bar */

ul {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: white;
  top: 0px;
  width: 100%;
}
li.brand {
  margin-left: 100px;
}
li.active {
  background-color: #FAFAFA;
}
li.right {
  float: right;
}
li.right-space {
  float: right;
  margin-right: 100px;
}
li {
  float: left;
}
li,
a {
  font-size: 18px;
  display: block;
  color: #58d68d;
  text-align: center;
  padding: 7px 12px;
  text-decoration: none;
  transition: 0.4s;
}
li:hover,
a:hover {
  background-color: #FAFAFA;
}
/* Intro */

h1 {
  margin-top: 20px;
  margin-left: 100px;
  font-size: 100px;
  color: white;
  margin-bottom: 0px;
}
h2 {
  margin-top: 0px;
  margin-bottom: 50px;
  margin-left: 100px;
  color: white;
  max-width: 1000px;
  opacity: 0.7;
}
/* Packs Section */

div.packs {
  width: 100%;
  height: 500px;
  background-color: white;
}
p {
  margin: 50px;
  display: inline-block;
  padding: 7px 12px;
  border-left: 6px solid red;
  background-color: lightgrey;
} 

＆＃13;

<!DOCTYPE HTML>
<html lang="en-us">

<head>
  <title>Packet</title>
  <!-- PLUGINS -->
  <link rel="icon" href="packet.ico" />
  <script src="plugin/mobile.js"></script>
  <link rel="stylesheet" type="text/css" href="plugin/packet.css">

</head>

<body>

  <!-- Navigation Bar -->
  <nav>
    <ul>
      <!-- Left -->
      <li class="brand"><a href="http://www.packet.ml">Packet.ml</a>
      </li>
      <li class="active"><a href="#">About</a>
      </li>
      <!-- Right -->
      <li class="right-space"><a href="#home">Application</a>
      </li>
      <li class="right"><a href="#home">Download</a>
      </li>
      <li class="right"><a href="#home">Packets</a>
      </li>
    </ul>
  </nav>

  <!-- Intro -->
  <header>
    <h1>Packet</h1>
    <h2>Any application, software programm or game in one place! Packets everywhere!</h2>
  </header>

  <!-- Packs Section -->
  <section>
    <div class="packs">
      <p>Edition Packet</p>
      <p>Full Packet</p>
      <p>User Pro Packet</p>
    </div>
  </section>


</body>

</html>

＆＃13;

＆＃13;

＆＃13;