Troubleshooting HTML Label Problems


I am facing an issue with my custom labels. 

.label-ras{
    padding:3px 10px;
    line-height:15px;
    color:#fff;
    font-weight:400;
    border-radius:5px;
    font-size:75%;
    
}
.label-primar{background-color:#5c4ac7}
<span style="background-color: #f25a04" class="label-ras label-primar"> <i style="color: white; font-size: 11px;" class="fas fa-user-cog"></i> Founder</span><br>
<span style="background-color: #f25a04" class="label-ras label-primar"> <i style="color: white; font-size: 11px;" class="fas fa-user-cog"></i> Founder</span><br>

Upon observation, these two labels appear connected.
I wish to have a small gap between them.

htmlcss

Answer №1

To enhance the appearance of the .label-ras class, you can consider including margin and setting the display property to inline-block like so:

.label-ras{
    padding:3px 10px;
    line-height:15px;
    color:#fff;
    font-weight:400;
    border-radius:5px;
    font-size:75%;
    margin:5px 0;
    display: inline-block;
}

Answer №2

Make sure to set the display property to either block or inline-block and include a margin:

.label-ras {
  padding: 3px 10px;
  line-height: 15px;
  color: #fff;
  font-weight: 400;
  border-radius: 5px;
  font-size: 75%;
  display: inline-block;
  margin: 10px 0;
}

.label-primar {
  background-color: #5c4ac7
}
<span style="background-color: #f25a04" class="label-ras label-primar"> <i style="color: white; font-size: 11px;" class="fas fa-user-cog"></i> Founder</span><br>
<span style="background-color: #f25a04" class="label-ras label-primar"> <i style="color: white; font-size: 11px;" class="fas fa-user-cog"></i> Co-founder</span><br>

Answer №3

You got this! 

span.labal-primar:not(:last-child) { margin-right: 12px; }

This code snippet will automatically apply a right margin to each span.label-primar element except for the last one. This means no matter how many spans you have, they will all have consistent spacing. Just remember to set your span elements to display: inline-block in order for the margins to take effect.

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

JavaScript enables users to store over 5 megabytes of data on their client devices

Is there a way to store more than 5mb in the client browser? I need this functionality across various browsers including Firefox, Chrome, Internet Explorer, Safari (iOS), and Windows Phone 8 Browser. Initially, localStorage seemed like a viable option as i ...

javascripthtmllocal-storageindexeddbweb-sql

In jQuery, a dropdown selection can be filled with multiple textboxes sharing the same class

I'm experimenting with the idea of using multiple textboxes with the same class filled with different dropdown options that also have the same class. However, I am encountering some issues. When I click on a dropdown option, it changes the value in a ...

javascriptjqueryhtmlselect

D3 group of legendary elements

Is there a way to group both the circle and text elements for each legend item together? I'm currently facing a challenge with the enter/exit methods. While I can create the groups (g), I'm unable to append the text and circle elements. li.sel ...

javascripthtmld3.js

Utilizing a switch to deactivate all currently active classes on individual div elements

I'm currently facing an issue with implementing a toggle feature in a particle manner. I have three divs with onclick events and each has a toggle CSS class. My goal is to ensure that when one div is clicked, if the others are active, they revert back ...

javascripthtmlcss

When importing data from a jQuery AJAX load, the system inadvertently generates duplicate div tags

Currently, I am utilizing a script that fetches data from another page and imports it into the current page by using the .load() ajax function. Here is the important line of code: $('#content').load(toLoad,'',showNewContent()) The issu ...

javascriptjqueryhtmlcssajax

What causes the CSS width property to vary when using the display:inline property?

There is a piece of code that contains a <ul> element with the default css property display:block. Here is the code snippet: ul,li{ list-style-type:none; padding:0; /*display:inline;*/ } #parent{ width:100%; /*height:50px;*/ background-color ...

htmlcsshtml-listsdisplay

Tips to center a circular progress bar in Material UI

Does anyone know how to properly center-align a circular progress bar in a login form using material UI? I'm having trouble with it not being positioned correctly: screenshot {isLoading && <CircularProgress />} {user?.ema ...

javascripthtmlcssreactjsmaterial-ui

Update the content of the h5 tag dynamically as the new div's data attribute is revealed by scrolling into view

I would like to dynamically update the h5 tag text based on the data attribute of the current div when it comes into view. The CSS is configured so that each .bar class div occupies 100% height, with only one visible at a time. I have successfully implemen ...

jqueryhtmlfunctiontextattributes

Implement the Vue.js @click directive in a location outside of an HTML element

I've set up a link like this: <a href="#" @click="modal=true">Open modal</a> Here's the data setup: export default { data () { return { modal: false } } } Is there a way to trigger the cli ...

javascriptjqueryhtmlvue.jsvuejs2

Tips for dynamically updating the div class based on the model's value

How can I dynamically change the CSS class of a bootstrap element based on a value? I would like to display a div in green if the value is "OK" and red otherwise. If status = "OK", it should look like this: <div class="small-box bg-green">, else < ...

javascriptcssasp.net-mvcbootstrap-4

Toggle the visibility of a div by clicking on another div in a

I have created a unique design where a div features a background image of a face, along with a paragraph, two buttons, and an input box inside it. While I know this question has been asked before, my scenario is slightly different. I want the div with the ...

javascriptjqueryhtmlcss

Tips for troubleshooting a sass file that is not displaying changes in the browser

Currently working on my portfolio website using bootstrap and sass along with a theme kit. Initially, I attempted to implement a grid column style for the intro-section but had a change of heart and deleted the style. Surprisingly, every time I refresh my ...

htmlcsssassbootstrap-5

Header element not keeping the navbar at the bottom

My goal is to attach this navigation bar to the bottom of a header, but it's sticking to the top instead. I want the navigation to remain at the bottom of the header even when the user scrolls down. Currently, both the header and navigation are set t ...

htmlcss

Executing a function defined in a .ts file within HTML through a <script> tag

I am attempting to invoke a doThis() function from my HTML after it has been dynamically generated using a <script>. Since the script is loaded from an external URL, I need to include it using a variable in my .ts file. The script executes successfu ...

javascripthtmlangular

The hyperlink to a different webpage does not trigger any JavaScript functionalities or render any CSS styles

I am facing an issue with linking HTML pages that run Javascript and JQuery Mobile from another HTML page. My link setup is as follows: <a href="hours.html">Hours</a> The linking page and the linked pages are in the same directory. However, ...

javascripthtmlcsshyperlink

Display PHP output within a styled CSS box

<html> <head> </head> <style type="text/css"> .yellow-box { position:absolute; top:100px; left:500px; width:300px; height:300px; background:yellow } </style> <div class = "yellow-box" > </div ...

phpcss

Similar to using `display:flex` and `justify-content: center`, you can achieve centered

I have a group of n children within a div. I want to arrange them in a single row and center them horizontally. If I were to use flexbox, I could achieve this by: display: flex; justify-content: center; Is there a way to accomplish the same layout using ...

cssflexboxgrid-layout

Step-by-step guide on retrieving news_id and displaying it in an alert when an item

How can I retrieve the item ID when it is clicked in a Listview to display the specific news_id in an alert? Below is the HTML code snippet for my page: <body> <div data-role="page" id="taxmanhomepage" data-theme="e"> <div data-role="h ...

javascripthtmljson

Retrieving a PHP variable from HTML without using a form

Is there a way to pass a variable from HTML to PHP without using a form and the traditional post or get methods? I have tried using the code provided, but I am unable to access the value of the 'buy1' variable in PHP. Is there a way to achieve th ...

javascriptphphtml

Show a popover within a parent div that has limited visible space due to its hidden overflow

Struggling with AngularJS, I can't seem to find a simple solution for this problem. In my code, there's a div element with the overflow: hidden property set due to an internal scrollbar. Inside this div, there's a dropdown menu that is trigg ...

javascripthtmlcssangularjs