段落に余白を追加するにはどうすればよいですか？

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あなたはそう、代わりにdisplay: inline-block;を試してみてくださいあなたは段落のdisplay: inline;を使用しているinline-block

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; 
 
}

<!-- 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>

Answer 2

としてpを設定pを設定されている、インライン要素では動作しません。ここで

は実施例である：

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; 
 
}

<!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>