Spacing is essential between <h3>, <h4>, and <p> elements

I'm facing a simple issue with my code. I can't seem to remove the white gap between each tag, particularly noticeable between the h3 and h4 tags with background colors. How can I eliminate this space?

.realEstatePricing h3 {
  Background: lightblue;
  height: 40px;
}

.realEstatePricing h4 {
  Background: lightgrey;
}
<section class="realEstatePricing">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h3 class="text-center">Photo Package</h3>
        <h4 class="text-center">$99</h4>
        <p>description 1</p>
        <p>description 1</p>
        <p>description 1</p>
        <p>description 1</p>
      </div>
    </div>
  </div>
</section>

htmlcsstwitter-bootstrap-3

Answer №1

One possible solution in response to the other suggestions is as follows:

.propertyValue h3 {
    background-color: skyblue;
    height: 40px;
    margin-bottom: 0;
}
.propertyValue h4 {
    background-color: silver;
    margin-top: 0;
}

By implementing this code, you can ensure that your existing left and top margins are maintained.

Answer №2

To achieve this, simply set the margin to 0 for both elements: 

 .realEstatePricing h3 {
   Background: lightblue;
   height: 40px;
   margin:0;
  }
 .realEstatePricing h4 {
   Background: lightgrey;
   margin:0;
  }
<html>
<head>
</head>
<body>

    <section class="realEstatePricing">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h3 class="text-center">Photo Package</h3>
                    <h4 class="text-center">$99</h4>
                    <p>description 1</p>
                    <p>description 1</p>
                    <p>description 1</p>
                    <p>description 1</p>
                </div>
            </div>
        </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

Tips on deactivating or disregarding a click() event

I have created a card with an anchor tag and added an onclick() event to the card using its id. The click is working fine, but the issue is that even if the checkbox, image, or button inside the card is clicked, the click event of the card is triggered. Ho ...

jqueryhtmlonclick

Button Click Does Not Trigger Bootstrap Modal Display

This is a sample Bootstrap document that includes JS and CSS files to display a list properly in Bootstrap. However, the Modal does not appear when clicking on Launch demo modal. No JavaScript errors are displayed in the Console. Can you help troubleshoot ...

javascripthtmltwitter-bootstrapbootstrap-modalbootstrap-5

Issues with proper layout of HTML table

I am currently working on creating a table to showcase inmate information. Utilizing Flask and Jinja, I am transferring data from my Python file to the HTML file: headings = ("First", "Last", "Court Date", "Bond Amount&q ...

htmlflaskjinja2

Analyzing differences in id usage within HTML5

I have created a setup using section and article to display content. Here is the code snippet: <section id = "examples"> <article id="item_1"> ... </article> <article id="item_2"> ... </article> <article id=" ...

javascriptjqueryhtmlarticlesections

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

javascriptcsshttps

Building vue js logic to manage state across multiple ul li elements

I have a situation where I have an unordered list with a static number of list items (menu elements) that are rendered on the server side. I need to add some state-based logic to each list item, such as changing the color of the active item and expanding ...

javascripthtmlvue.jshtml-lists

Tips for effectively showcasing errors received from the server during validation?

I have been working on implementing a contact form on my website, but I am encountering some issues with how the error and success messages are being displayed. Since I am relatively new to PHP, I suspect that there might be errors in my code. I attempted ...

javascriptphphtmljquery-ui

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

I'm currently working on a side menu that drops down when hovering over Section One within the <a> tag. I need some guidance on how to make the JavaScript code continuously check the state of the list after a set amount of time in order to autom ...

javascripthtmlcss

Steps to deactivate a particular date on the Jquery UI datepicker:

I am struggling to disable specific dates (20, 21, 25 OCT 2015) using the JQuery UI datepicker. Despite my efforts, I have not been able to achieve the desired output. Below is a snippet of my code for reference. <!doctype html> <html lang="en" ...

javascriptjqueryhtmljquery-uidatepicker

What is the best way to arrange these badges in a row?

I'm struggling to horizontally align these badges next to each other, as inline-block isn't working and they keep stacking vertically instead of side by side. How can I achieve the alignment shown in the image below? This is the desired appeara ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for choosing specific text on the UI with the Selenium WebDriver

There is a UI page with data structured like this: name1 label1 name2 label2 name3 label3 name4 label4 name5 label5 name6 label6 If I need t ...

htmlselenium

Scrollbar Overlay

I am currently working on an HTML page where I have implemented a CSS style overlay lightbox effect using CSS and jQuery. If you want to take a look at the code, click here One issue I am facing is that when I resize the window height so the right-hand s ...

jqueryhtmlcss

Choosing the subsequent element that comes before

<tr class="main"></tr> <tr class="emails-details"> <button>some button</button> </tr> <tr class="main"></tr> <tr class="emails-details"> <button>some button</button> </tr> &l ...

javascriptjquerycss

Using CSS backdrop-filter to create a unique blurred border effect for your web elements

In my quest for achieving unique visual effects, I have been experimenting with the backdrop-filter and element borders. While it is easy to create an element that blurs its background, I am facing challenges in making the filter affect only the border are ...

htmlcssborderblur

What is the best way to style odd and even divs in CSS?

I am struggling with applying different CSS styles to the odd and even divs in my code. The current implementation I have does not seem to be working as expected. I specifically want the styling to target only the direct children of the div, rather than an ...

htmlcsscss-selectors

What orientation is best for the back arrow to take in a website written in Arabic?

Currently developing a website that supports Arabic language while considering security measures. The browser's back button will terminate the session, requiring users to utilize the on-page back button instead. When incorporating Arabic text, should ...

htmlwebarabic

"Revamp your site with Vue and API for dynamic background

I'm faced with an issue where I am attempting to modify the background of a joke fetched from an API, but for some reason, the background is not changing and I can't seem to identify why. The main problem lies in my inability to change the proper ...

javascripthtmlvue.js

What is causing nth-of-type to behave like nth-child?

My goal is to alternate colors for elements with a certain class, ignoring any elements of different classes in between them. Despite my attempts to use nth-of-type, I have encountered issues with its functionality in Firefox and Chrome. http://jsfiddle.n ...

htmlcsscss-selectors

Mozilla displays the background color even when the visibility is set to hidden

When working with CSS, I've noticed that when I use visibility: hidden on a <td> tag in Mozilla, the background color still shows. To see an example, visit this jsfiddle. It displays fine in Chrome but not in Mozilla. ...

htmlcss

The dropdown menu is unable to open directly below the main menu item

How can I make the submenu open to the left when hovering over a menu point, instead of directly under it? I have tried adjusting the position attributes but haven't found the right solution yet. The closest I got was by changing the display property ...

htmlcss