How to add a margin to a paragraph? - html

Question

I want to make a website and I am paragraphs with border. I tried margin on css but doesn't work. How to make paragraph margin on this?
This is my HTML code:
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">Packet.ml</li>
<li class="active">About</li>
<!-- Right -->
<li class="right-space">Application</li>
<li class="right">Download</li>
<li class="right">Packets</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>
I tried margin:50px;, but not work. This command action only on margin-left and right.
Any ideas?

Answer 1

marginwon't work in inline elements, which you are setting the p so set p as 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">Packet.ml
</li>
<li class="active">About
</li>
<!-- Right -->
<li class="right-space">Application
</li>
<li class="right">Download
</li>
<li class="right">Packets
</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

You are using display: inline; for paragraphs, try display: inline-block; instead.
Here is an working example:
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">Packet.ml
</li>
<li class="active">About
</li>
<!-- Right -->
<li class="right-space">Application
</li>
<li class="right">Download
</li>
<li class="right">Packets
</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>