Tips for splitting h4 and p elements

Having trouble separating some of my h4 and p tags, even after setting margins for them. Any suggestions on how to overcome this?

<div class="row  text1 offset-md-1">
 <h4>Description</h4>
                                
    <p class="semibold">Materials</p>

Output: h4 and p tags

<p class="semibold">Installation1</p>

<ul>
    <li>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, incidunt?
       </p>
    </li>
</ul>
                                    
                            
<p class="semibold">Installation2</p>
</div>

Output: p tag and following p tag

CSS:

.text1{
    h4{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    p{
        margin-top: 20px;
        margin-bottom: 20px;
        
    }

    ul{
        margin-top: 20px;
        margin-bottom: 20px;
        list-style-type:disc;
    }
}

Answer №1

Your parent div is utilizing a row class within a flexbox layout, which is causing issues with your overall design.

 <div class="">
        <h4>Description</h4>
        <p class="semibold">Materials</p>
        <p class="semibold">Installation1</p>
        <ul>
            <li>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, incidunt?
                </p>
            </li>
        </ul>
        <p class="semibold">Installation2</p>
    </div>

Give this a try instead.

Answer №2

Simple solution

Insert a <br/> tag between the two paragraphs like this

   <p>.. </p> </br><p></p>

Alternatively, you can turn the div into a flexbox

     div
     {
      display:flex
      flex-direction:column
     }

    p
   {
    flex:1;
   }

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

Positioning two buttons with one on the left and the other on the right

I am currently looking to add an ADD button next to the VIEW button in this layout. An example of what I am trying to achieve can be seen at where you can click on the GRID VIEW icon. <div class="desktop_view product-view grid-list-row-view hide" sty ...

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

Adding a timestamp to the src URL in HTML: A step-by-step guide

Looking for a way to implement cache busting in my index.html file. Take a look at the code snippet below: <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="&l ...

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Using HTML: <input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/> Not working with script: var ETD = $("#ETD"); ETD.html("<input class='m-ctrl-medium date-picker' id='la ...

Get rid of emojis and unicode characters

My website and database are both configured to utf-8 and utf8mb4 encoding. While textareas accept utf-8 symbols and emojis without issue, I want to restrict certain input fields (such as name and address) to only allow basic text and numbers. This include ...

Today, I am experimenting with HTML5 File Upload using Capybara and Selenium Webdriver in Ruby

I have encountered a problem with a simple modal that allows users to upload a file using a browse button. Due to some unknown issue, possibly related to the fact that it is an HTML5 file input and the browser adds its own functions to it, testing this has ...

"Implementing a 960 Grid System with an HTML5 Header Element

Exploring 960.gs and HTML5 as a beginner has led to some challenges. My current project involves an image spanning 2 grid units, followed by a div taking up 5 units on the same line, with a line break needed before displaying a heading. I attempted the la ...

The content in the footer is not displaying correctly (Vuejs)

I recently developed a component with a title and a background color meant to cover the entire page, but it seems to have a top margin that I can't seem to remove. Additionally, I created a footer component that should always stay at the bottom of the ...

Customizing Semantic UI Navigation Menu Styles

For the first time, I am incorporating semantic-ui into my React application. The specific package I am working with can be found here: To display my header, I am using the following code: <Menu className='header' > <Containe ...

Deciphering HTML entities and decoding URLs within a continuous flow

Is it possible to find functions that accept streams and output streams for decoding operations, rather than loading the entire encoded document into memory like the HttpUtility.UrlDecode and HttpUtility.HtmlDecode methods do when taking strings as input ...

dealing with a situation where the call to the getElementsByTagname method returns null

Here is a snippet of JavaScript code that I am working with: <script language="JavaScript" type="text/javascript"> var sendReq = getXmlHttpRequestObject(); var receiveReq = getXmlHttpRequestObject(); var lastMessage = 0; var mTimer; ...

Tips on leveraging state values within the makeStyles function in Material UI React

I'm in the process of building a Webpage and incorporating Material UI for the Components. Here's the code: import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ container: { ...

Encountered issue while attempting to perform search functionality in Datatable using the Moongose-Pagination-v2 plugin

I'm struggling to implement server-side pagination, so I decided to use the Pagination-v2 plugin to fetch data from MongoDB and display it in a data table. However, I've encountered an issue where the search function is not working as expected. I ...

Utilizing jQuery for serializing unorganized lists

I have created multiple lists within a list and I need to pass the IDs using jQuery to another PHP file (updateDB.php). I attempted to serialize the list data but was unsuccessful. I'm not certain if I have implemented it correctly, I searched extens ...

Issues with Persistent Navbar Stickiness

I'm encountering an issue with the sticky navbar on my website. I implemented the code for this navbar from a tutorial at w3schools. However, the problem is that the sticky effect on the navigation menu doesn't seem to work correctly. The menu j ...

Tips for aligning text alongside ons-select elements

I am working with the following HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://u ...

Effortlessly glide through columns in Bootstrap 4

On my page, I have three columns with a class of col-md-6. Initially, only box1 and box2 are visible. When the user clicks on the button labeled BTN, I want to display box2 and box3, smoothly transitioning all boxes to the left. I attempted using jQuery ...

What is the best method for directing to various pages on a GitHub Pages website?

My GitHub Pages site is live at this link. While the splash page loads perfectly, clicking on the circle to transition to the next page, 'landing.html', leads to a 404 error. I have exhausted all possible solutions to address this issue, includin ...

Use jQuery to create a price filter that dynamically sets slide values based on the filter object

I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...

Apply a transformation effect to the current active menu item in the Wordpress CSS main navigation

I am currently working on a local WordPress installation with a theme. One specific feature I am trying to achieve is to have a dynamic colored line with a triangle shape indicating the 'current page' on the menu. My goal is to duplicate this tri ...