Adding space between the heading and the text underneath by placing a margin between h2

I am dealing with a situation where I have an 

<h2 class="landing-panel-title>
containing a 
<span class="landing-panel-icon-right ion-ios-search-strong>
. The second class on the span is from an icon font called ionicons. Despite this, it may not be important in this context.

This setup consists of a header and an accompanying icon. My goal is to create a margin between the icon and the title that adjusts itself dynamically (I want the icon all the way to the right when it follows text, and the text all the way to the right when the icon is placed left of the text). I attempted to use text-align for this purpose, but so far, I haven't been successful.

http://jsfiddle.net/eakfsLr3/

HTML:

<div class="landing-panel">
        <h2 class="landing-panel-title">Site Reviews<span class="landing-panel-icon-right ion-ios-search-strong"></span></h2>
        <p class="landing-panel-text">I've been exploring various PTC sites, gathering information, conducting tests, and compiling useful and relevant findings.</p>
    </div>
    <div class="landing-panel">
        <h2 class="landing-panel-title"><span class="landing-panel-icon-left ion-erlenmeyer-flask"></span>Methodical Approach</h2>
        <p class="landing-panel-text">We've collected data, tested relevant information alongside my partner, and he's leveraging our guides and knowledge to advance his career in PTCs.</p>
    </div>
    <div class="landing-panel">
        <h2 class="landing-panel-title">Results<span class="landing-panel-icon-right ion-clipboard"></span></h2>
        <p class="landing-panel-text">We don't peddle nonsense, we provide credible information deemed authentic and effective by our team. Enjoy the content!</p>
    </div>

CSS:

.landing-panel {
        background-color: #d5f5e3;
        padding: 0.5em;
        margin-bottom: 0.5em;
    }
    .landing-panel-title {
        width: 100%;
    }
    .landing-panel-icon-right, .landing-panel-icon-left {
        color: #913D88;
        font-size: 3em;
    }
    .landing-panel-icon-right {
        text-align: right;
    }
    .landing-panel-icon-left {
        text-align: left;
    }
    .landing-panel-title, .landing-panel-icon, .landing-panel-text {
        margin: 0;
        padding: 0;
    }

Any assistance provided will be highly valued.

htmlcss

Answer №1

It seems like you are looking for this solution: http://jsfiddle.net/sergdenisov/yv2xazjh/1/

.landing-panel {
    background-color: #d5f5e3;
    padding: 0.5em;
    margin-bottom: 0.5em;
}
.landing-panel-title {
    display: table-cell;
    width: 100%;
}
.landing-panel-icon {
    display: table-cell;
    color: #913D88;
    font-size: 3em;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
    margin: 0;
    padding: 0;
}

.landing-panel-icon + .landing-panel-title {
    text-align: right;
}
<div class="landing-panel">
    <h2 class="landing-panel-title">Site Reviews</h2>
    <span class="landing-panel-icon ion-ios-search-strong">Icon</span>
    <p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
    <span class="landing-panel-icon ion-erlenmeyer-flask">Icon</span>
    <h2 class="landing-panel-title">Methodical Approach</h2>
    <p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
    <h2 class="landing-panel-title">Results</h2>
    <span class="landing-panel-icon ion-clipboard">Icon</span>
    <p class="landing-panel-text">We won't serve you nonsense, we provide trustworthy information that our team has validated as effective. Enjoy reading!</p>
</div>

Answer №2

Change the span's style to display:inline-block

    span {
    display:inline-block; /*this allows margins to take effect*/
    margin: 0 10px;
}

Answer №3

Give this a shot

.header-content>span{
width:..px /*adjust as needed */
display:inline-block;
text-align:center;/* align left or right */
}

If you prefer a small margin between them, try adding &nbsp; before the span element

For an icon to appear on the right of the header:

.header-content>span{
position:absolute;
right:0;
/* Keeps the icon on the right at all times */
}

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

How to vertically align an image within a div that has a variable height

Is there a way to center an image vertically within a div that is 1/5 of the screen's height? I have managed to horizontally center the image, but vertical alignment seems tricky. Here's the code I've tried so far: http://jsfiddle.net/ws911 ...

htmlcssvertical-alignmentviewport-units

Winning opportunities created by using credits in the slot machine

**Greetings, I have created a slot machine using JavaScript, but I am looking to enhance the player's chances based on their credits. Can anyone guide me on how to achieve this? Essentially, I want the player's odds to increase proportionally wit ...

javascripthtmlslot

``Are there any thoughts on how to troubleshoot display problems specifically on mobile

Whenever I use Safari on iOS for my web application, I encounter strange rendering issues. It's odd because the majority of the time everything functions as it should, but every now and then these bugs crop up with no discernible pattern. Examples th ...

cssvue.jssafarimobile-safari

A guide on personalizing HTML for Django forms

I have implemented an HTML template on my website and need to capture information for my Django backend. Specifically, I am trying to extract the email address from this section of code: <input type="text" placeholder="Email" value="" style="height: 30 ...

javascriptjqueryhtmlcssdjango

"Implementing a function where two different elements can change the text of a button

I have created a custom FAQ script using dl, dt, and dd elements: $('.faqs dd').hide(); // Hide all DDs inside the .faqs container $('.faqs dt').hover(function(){ $(this).addClass('hover' , 'slow')},function(){ ...

jqueryhtml

When using the `position: absolute` and `left: 50%` properties on content with a `width: fit-content`, the content gets wrapped in Windows,

Why does the below code behave differently on Windows and Mac? On Windows, the content wraps or the div occupies only 50% of the browser's width, causing the content to wrap if its width exceeds 50% of the browser's width. However, on Mac, it tri ...

csswindowsmacos

The enigmatic appearance of CSS border-image using a transparent image creates a visible edge when viewed

My website, located at , features a unique design element created using the CSS border-image property and a .png image with a transparent edge, giving the appearance of torn paper on the divs. However, I have encountered an issue specifically on my Android ...

androidcsstransparencyborder-image

Converting RGB color values to HSL color values using a unique, randomized Javascript approach

On this site, I have added a random color overlay to the media-boxes. Check it out here Thanks to the helpful folks at stackoverflow, I was able to create this script: var getRandomInRange = function(min, max) { return Math.floor(Math.random() * (ma ...

javascriptcssrandomrgbhsl

Using a variable as a URL parameter in a jQuery ajax request: tips and tricks

$.ajax({ type:"POST", url:"hostname/projfolder/webservice.php?callback=statusReturn&content="+str_table, contentType: "application/json; charset=utf-8", crossDomain:true, dataType:'jsonp', succe ...

javascriptajaxhtml

Change the marquee scrolling back to its original starting point

I am trying to implement a continuous image scroll (marquee) in HTML. My goal is to have the marquee stop scrolling when the mouse hovers over it, with the images returning to their initial position. Once the mouse moves away, I want the marquee to resume ...

jqueryhtmlcssimagemarquee

How do browsers typically prioritize loading files into the cache?

Out of curiosity, I wonder if the categorization is determined by file names or byte code? It's possible that it varies across different browsers. Thank you! ...

javascripthtmlcssbrowsercross-browser

Updating the Position of an Element in ElectronJS (e.g. Button, Label, etc)

Is there a way to change the positioning of a button in a window using JavaScript and Electron? I am trying to create new input boxes next to existing ones, but they always appear below the last one created. Is it possible to specify x and y coordinates fo ...

javascripthtmlelectron

Ways to make JavaScript cycle through a set of images

I'm having trouble trying to set up a code that will rotate multiple images in a cycle for an image gallery I'm working on. So far, I've only been able to get one image to cycle through successfully. Any help or suggestions would be greatly ...

javascriptcsshtml

Glowing semi-opaque about spotify?

Recently, I decided to challenge myself by recreating the Spotify homepage using only pure Javascript and SCSS as a way to test my front-end development skills. You can view my progress so far at this link, although please note that it's still a work ...

csshtml

Ways to move upward from a lower position

I am trying to create a hover effect where the title and content move to the right position upon hovering. The issue I am facing is that the transition on the `Title` class is not working, and as a result, the hover effect is also not functioning properly ...

htmlcss

Steps for appending a string to a variable

Currently working on creating a price configurator for a new lighting system within homes using Angular 7. Instead of using TypeScript and sass, I'm coding it in plain JavaScript. Page 1: The user will choose between a new building or an existing one ...

javascripthtmlcssangulartypescript

Tips for eliminating the shadow effect from a textbox using CSS

I need assistance with removing the shadowed edges on a textbox in an existing project. Can anyone provide guidance on how to remove this effect? Thank you for your help! ...

htmlcsstwitter-bootstrapbootstrap-modal

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

htmlcsscss-grid

What benefits does a dynamic website like this offer compared to one that is purely AJAX-based?

There are two main categories of dynamic websites that I define: The first type utilizes languages like PHP to concatenate an HTML page and send it back to clients. On the other hand, the second type uses an HTML template where all interfaces provide JSO ...

htmlajax

Is it possible to incorporate a foreach loop while also implementing unique adjustments at specific locations within the code?

I have been searching for a solution to this problem on various forums, but I couldn't find one that fits my needs. My challenge is to create a foreach loop for 12 elements, with 3 of them having a different class applied to them. This is the code I ...

phphtmlmysqlarrays