What is the best way to include some white space around a paragraph?

Can anyone help me figure out how to add margins to my paragraphs with borders on a website? I've tried using margin in CSS, but it's not working.

Here is the HTML code I am using:

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've already tried using margin:50px;, but it seems to only affect the left and right margins. Any suggestions on how to make this work?

Thanks for your help!

htmlcss

Answer №1

Margin will not have an effect on inline elements, such as the p tag. In order to apply margin to the p element, you should set its display property to 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

For paragraphs, consider using display: inline-block; instead of display: inline;.

Here is a functioning 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"><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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to ensure that a singular button is visible within a specific jQuery function

I am looking for a solution regarding the placement of a button labeled "add to profile" within a jQuery div. Specifically, I would like this button to only appear after the last "next" button in the sequence. For example, after question 1 and its respect ...

htmlajaxjquery

With the addition of a key element in the opening statement

Take a look at this code snippet: <div class="content"> This is some title<br/> Some text<br/> And maybe more text. </div> I am trying to wrap the first sentence with a <span> tag before the <br/> element, like s ...

jquerycss

Using Javascript, dynamically animate the text in the hero unit with fading in and out effects

I currently have a "Hero" unit with the following code: <div class="hero-unit"> <div class="container"> <h1>Dapibus Euismod Mollis</h1> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to align a scalable SVG image in the center?

My goal is to horizontally align this SVG within its container, which could be any div, body, or other element. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content"> &l ...

htmlcsssvg

Conflicting CSS selection elements in WordPress causing theme theme selection conflicts

Despite trying various edits to my custom CSS, such as including ::selection{color: white; background: #2f3f58;}, copying and pasting code from sites like W3Schools and stack overflow, nothing seemes to work. I am using the Hueman theme from , which has a ...

htmlcsswordpresswordpress-themingselection

Customizable user profile page

I'm currently working with twitter bootstrap. My goal is to design a profile page featuring an edit button positioned on the top left corner. Upon clicking this button, all the profile details will transition into editable form fields (which I bel ...

htmlcssuser-interfacerazortwitter-bootstrap

Display the chosen alternative in a Bootstrap dropdown menu

I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transforming content dynamically

I am currently working on a single-page website that features a comprehensive product catalog. Here are the key elements I'm focusing on: A one-page website layout, complete with header, content, and footer (developed using HTML5/CSS3) Dynamic cont ...

jqueryajaxhtmlpluginscss

Checking if the group of radio buttons has been selected using JQUERY

Need help with validating a group of radio buttons. If none are checked, display an error message in the span element to prompt users to select an option. The strange issue I am facing is that the validation code works only when placed below the radio butt ...

javascriptjqueryhtml

The navigation bar triggers the opening of all icon menus in their designated positions at the same time

This code snippet represents the navigation bar for an admin user, featuring 3 icons: navigation menu, user menu, and manage button icons. The problem arises when clicking on any of these icons, as all dropdown items from each icon are displayed in their ...

htmlreactjsmaterial-uinavbar

Finding a nested HTML element within a frame using Selenium without the presence of an iframe

Currently, I am delving into the world of Selenium using python to automate form filling on a particular website. However, my efforts have hit a roadblock as I am struggling to identify any elements within a frame and encountering a dreaded NoSuchElementEx ...

pythoncssseleniumframewebdriverwait

Include brand logo to the Bootstrap navigation bar

Following the method provided in Bootstrap documentation, I included the following code: <div class="container"> <a class="navbar-brand" href="#"> <img src="/img/hangers.jpg" alt= ...

htmlcssbootstrap-5web-frontend

Guide to aligning MEGA MENU with navbar

I've implemented a navbar that includes dropdown nav-items with a mega menu. The mega menu is set to position:absolute. Is there a way to dynamically align the mega menu in the center of the page while using the same component for all nav-items? Ch ...

htmlcssbootstrap-4sassmegamenu

What is the best way to retrieve the value of an object in PHP?

There seems to be an issue with retrieving the value of an object. When attempting to get the object value, it appears empty. However, when simply echoing the object, there is content and not null. I'm struggling to understand how to access that value ...

phphtml

What is the best way to showcase a list in three columns using PHP?

I've been struggling for hours to create a PHP code that will display a list in three columns with the following order: A D G B E H C F I Unfortunately, my current code only lists items in this order: A B C D E F G H I Here is the code I am curren ...

phphtmlhtml-table

Adjust item size and move them into the panel

I am looking to create a panel that arranges items in a specific layout shown here: https://i.stack.imgur.com/qw3lS.png Below is the code I have attempted so far: import React, { useCallback, useEffect } from "react"; import { Box, Grid, Tab, T ...

cssreactjsmaterial-uireact-typescript

Can you explain the purpose of using href="#" in web development?

I've noticed that numerous websites use links that have href="#". Can you explain what this means and how it is typically used? ...

htmlhyperlink

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

javascripthtmlcss

Guide to adding a Scrollable Navbar

Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...

javascriptjquerycss

Tips for ensuring the pop-up submenu remains visible even when the cursor is outside the parent container and submenu during hover

Is there a way to keep the pop submenu visible even when the mouse hovers outside of its parent container or the submenu? Currently, if the mouse doesn't move straight down from the parent container (B) .account-settings-container to the top arrow of ...

csspopuphoverpositionmouseover