Tanasa Paul Tanasa Paul - 4 months ago 13
CSS Question

How to add a margin to a paragraph?

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





I tried
margin:50px;
, but not work. This command action only on margin-left and right.

Any ideas?

Answer

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