Minimizing the distance between radio label rows

I'm working on a radio button with a label spanning two lines, but the whitespace between the lines is too much. I need to reduce it.

Here's my code example:

<label for="reg-promo">
  <input type="radio" name="promotion" id="registerPromo" v-validate="'required'" checked="checked"
    v-model="registerPromo" value="reg-promo" />
  <span>
    <b>Welcome Offer</b>
    <p id="welcomeOfferSubtext">$35 in credits available</p>
  </span>
</label>

The welcomeOfferSubtext ID applies a padding of 28px to the left of the paragraph:

#welcomeOfferSubtext {
  padding-left: 28px;
}

Currently, the design looks like this:

https://i.sstatic.net/zcndD.png

However, I want it to resemble this style:

https://i.sstatic.net/8QEDQ.png

What would be the best approach to correct this spacing issue without using line-height from CSS?

P.S

Please disregard any discrepancies in the sentences; the primary concern is adjusting the spacing effectively.

htmlcssvue.jsradio-button

Answer №1

The additional vertical space could be originating from different existing CSS styles or the default settings of the browser.

To resolve this issue, you have two options:

Firstly, you can change 

<p id="welcomeOfferSubtext">
to 
<div id="welcomeOfferSubtext">

Alternatively, you can include the following in your CSS:

#welcomeOfferSubtext {
    padding-left: 28px;
    margin: 0; // include this line
  }

Answer №2

Start by setting the span to display as inline-block, ensuring that all elements within the span will align properly. From there, adjust your CSS as needed. The <p> tag comes with default margins which can be modified to suit your design.

<style>
span{
    display: inline-block;
    vertical-align: top;
}
#welcomeOfferSubtext{
    padding: 0;
    margin-top: 5px;
}
</style>

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

Extract the entire div including all its elements and then transmit it using the PHP mail function

Currently, I am developing a feature that allows users to send an email. The email should include only one div from the page which contains elements added using the jQuery drag and clone function. I am unsure how to copy the entire div along with its child ...

phpjavascriptjqueryhtmlcss

What causes the code following the </html> tag to be shifted in front of the </body> tag? Is there a noticeable improvement in performance

After exploring various Stack Overflow posts like this particular SO question, I came across an unconventional Google recommendation on CSS optimization. This recommendation suggested deferring CSS loading with markup that looked like this: <d ...

htmlcssvalidationdomcross-browser

Can you identify the missing piece in my design?

#container { width: 250px; margin: 0 auto; } .group { border: 1px solid grey; margin-bottom: 20px; } .group p { text-align: center; font-family: Helvetica sans-serif; font-size: 25px; color: #2e3d49; } .group img{ wid ...

htmlcssimage

I am a beginner in vue.js and I am currently experimenting with posting and retrieving values in a cross-platform environment. However, I am encountering an error while

Trying to make a CORS-platform API call using post and get methods in Vue.js to register data. Note: The API call must be cross-platform. Encountering the following issue: The response to a preflight request does not pass access control check: No &apo ...

phpnode.jsvue.js

The process of converting a data:image base64 to a blob is demonstrated in this code snippet

Seeking a way to convert data:image base64 URLs to blob URLs. Below is the original code that generates the base64 URLs: <script> $(window).load(function(){ function readURL() { var $input = $(this); var $newinput = $(this ...

javascriptjqueryhtml

Troubleshoot: Why is the Chrome Extension content script failing to prepend to the body

Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...

jquerycssgoogle-chrome-extension

What is the best way to allocate mapState data in a list?

Currently, I'm tackling an apex bar chart project where I need to assign a list of mapState data into the apex series data. Here's the code snippet: <script> import { mapState } from 'vuex'; export default { data: () => ({ ...

vue.jsvue-componentvuexvuetify.jsapexcharts

When adjusting the viewport size, CSS animated elements may shift unexpectedly in Firefox and Safari, while Chrome displays them correctly

This example demonstrates a simple code snippet: body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .container { animation: moves 5s ease 0s normal forwards; /* transform: trans ...

htmlcssfirefoxsafari

Accordion-style elements arranged in a grid format, smoothly displacing surrounding content

I am facing an issue with a grid of accordions, as demonstrated in the codesandbox linked below. The problem arises when I open one accordion, causing all the accordions in the row below to shift down. Ideally, only the accordion directly below should be p ...

cssflexboxmaterial-uigridaccordion

Is it possible to utilize checkbox images for type="checkbox" in ng-repeat with AngularJS?

Hi there, I'm currently attempting to add a checkbox image for input type="checkbox" using ng-repeat. I've styled everything accordingly, but when I apply ng-repeat, it only works for the first item in the list. Here is what my CSS file looks lik ...

cssangularjscheckbox

"VueJs and ChartJs work together to create single file components, but the computed property is only rendered in Vue Dev Tools when the component is

Currently, I am working on a single file component that utilizes Chart.Js to display a basic visualization of some hardcoded data. The Chart.Js library is being called from a CDN placed in the head section of my index.html file. The project is based on th ...

javascriptwebpackvue.jschart.js

PHP consistently selects the final radio button element

Having an issue with submitting data from radio buttons to an ajax request for database transfer. -html <form class="siteInfo" action="ajax/site.php?nr=<?php echo $_GET['nr']; ?>" method="POST"> <input type="radio" name="transpor ...

phphtmlajax

Nesting maps in JavaScript is a powerful way to transform

I'm in the process of developing a budgeting app using React and JavaScript. At the moment, I have successfully generated a table displaying various costs. Name Budget Used $ Used % Available Food 300 300 100 0 Streaming services 600 600 100 ...

javascripthtmlreactjsarray.prototype.map

Is it possible to stack divs horizontally in a liquid layout while allowing one of the widths to be dynamic?

This is the code snippet and fiddle I am working with: http://jsfiddle.net/hehUt/2/ <div class="one"></div> <div class="two">text here text here text here text here text here text here text here text here text here text here text here te ...

csscss-float

Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

I have a set of items like this: I am trying to replicate the functionality of a file explorer in terms of item selection. To clarify, I aim to create a feature where hovering over an item and left-clicking it would generate a virtual rectangle to select ...

javascriptjquerycss

Confirm before closing the window

How can I get this code to function properly and show a confirmation alert after the user clicks on a button? This is essentially an "exit website button". The confirmation pop-up will have: If "OK" is clicked > the current window will close; If ...

javascripthtml

Utilize v-for to dynamically showcase a variety of images on your

My goal is to showcase several JPG pictures located in the src/assets/images folder by utilizing the v-for directive. However, it seems like the browser is having trouble locating them. Interestingly, manually adding the pictures with the same paths works ...

javascriptvue.js

The copy operation in Bitbucket Pipeline failed due to missing source files

I've encountered an issue while setting up a Bitbucket pipeline to automate the build stage. Unfortunately, I received an error message and the pipeline failed with the following code snippet: COPY ./fronted/package*.json ./ COPY failed: no source fil ...

dockervue.jsbitbucket

Use a PHP form to send an email with HTML formatting, rather than plain text

I am facing an issue with sending emails from a web form. The received email needs to be displayed as HTML and not text. function createMailBodyLine ( $title, $value ) { $value = nl2br(htmlspecialchars($value)); return "<tr> ...

phphtmlhtmlspecialchars

Chrome (on both Linux and Windows) is not compatible with CSS

Here is the code snippet I am currently working with: <style type="text/css"> div { margin: 100px auto; width: 0px; height: 0px; border-right: 30px solid transparent; border-top: 30px solid red; border-left: 30px solid red; border-bottom: 3 ...

windowslinuxfirefoxcss