Use vertical gaps to separate items by applying the following technique:

One of my components is designed to act as a badge. The CSS for this component includes:

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

HTML:

  <div class="label label-as-badge">
      {{ value.Termo }}
      <i class="fa fa-times"></i>
    </div>

CSS:

.label-as-badge {
  cursor: pointer;
  margin-left: 5px;
  border-radius: 50px;
  font-size: 12px;
  padding: 10px;
  background: #0066ba;
}

I am trying to place these badges in a flex div, with vertical spacing in between them. However, due to the padding, they end up looking too close together.

https://i.sstatic.net/6rO1q.png

Can anyone suggest how I can achieve the right vertical spacing between these items?

This is my div's HTML:

 <div class="badges">
  <app-badges
  *ngFor="let badge of badges"
  [value]=badge>
  </app-badges>
  </div>

CSS:

.badges {
    display: flex;
    flex-wrap: wrap;
  }

I have already attempted using the margin-bottom property but it did not produce the desired result.

htmlcssangularflexboxfont-awesome

Answer №1

There was an unusual spacing issue caused by the label class, but after removing it, everything worked perfectly.

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

Using an asynchronous pipe filter with the ngFor loop in Angular 2 for efficient data

I have a JSON array that I need to iterate through in order to display data using an NGfor Loop. My goal is to apply filters after the data has been loaded to refine the results. The issue I am facing is that my pipe filter is returning 'cannot read p ...

angularjsarraysjsonangulartypescript

Setting the Default Value for Dropdown Options in Angular 2

Back in the Angular 1 days, I had a trick up my sleeve for setting the default option on a dropdown menu: <select data-ng-model="carSelection" data-ng-options = "x.make for x in cars" data-ng-selected="$first"> </select> But now, in ...

htmlangular

The CSS code functions properly in Firefox, however, it does not seem to be functioning in

The menu I created in Magento is functioning correctly in Firefox. When I hover over the menu in Firefox, it works fine, but I am not seeing any hover effects in Chrome. Here is how my hover style is defined: #nav { width:965px; margin ...

htmlcssmenu

Unable to attach to 'aria-valuenow' as it's not recognized as a property of 'div'

I encountered an issue when attempting to assign an expression to an element. The problem arose with the following code: <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{MY_PREC}}" aria-valuemin="0" aria-value ...

angular

I'm searching for a universal guidebook on creating web page layouts

After 5 years of creating webpages, I have realized that my sites tend to have a nostalgic 1995 internet vibe. Despite being a C# programmer with knowledge in HTML, JavaScript, and CSS, my design skills could use some improvement. Is there a quick referenc ...

c#javascripthtmlcss

Is it possible for JavaScript to be cached when it is located within the body tag of an HTML document?

Currently, I am exploring the topic of How to optimize HTML rendering speed, and came across the idea that scripts in the HEAD tag can be cached. I'm curious, is it possible to cache JavaScript in the BODY tag? If not, I wonder why YUI suggests placi ...

javascripthtmlcachingprogressive-enhancement

Unlocking the Power of Asynchronous Data in Angular's Dynamic Form Patterns

Utilizing the dynamic form pattern in Angular has been incredibly helpful for our team. By defining our controls in ngOnInit, the form is dynamically constructed based on our needs. However, we've encountered a challenge with forms that require initia ...

angulartypescriptangular-forms

How can I make sure that the combobox in my Ionic app is aligned with the text fields in a row?

From the image provided, it's evident that my HTML code looks like this: <ion-row> <ion-col> <ion-item> <searchable-ion-select isModal="true" name="country" valueField="code" [(ngModel)]="country" title="Country" ...

htmlcssangularionic-frameworkalignment

Tips for eliminating the gap separating the authentication design from the additional elements within the Laravel, Vue, and Inertia framework

I'm currently working with Laravel and Vue using Inertia. When I log into the system, the authentication layout creates a space at the top of the page. How can I resolve this issue? Here is an image highlighting the space I need to remove, marked wit ...

htmlcsslaravelvue.jsinertiajs

Angular 8: How to dynamically assign formControlName in HTML according to the component

Within my database table, I have a field named "key_name" which is successfully being returned through the API and working as expected. My goal is to set the value of these fields as a formControlName in the HTML. In the component, I am using a reactive f ...

node.jsangularangular7angular8angular-reactive-forms

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar

angular 2 : Unable to locate the variable named 'Response'

I encountered an issue while working on my angular 2 project: Error: Cannot find name 'Response'. The error seemed to originate from the following service: import { Injectable } from '@angular/core'; import { Http } from '@ang ...

angularweb-servicesresponseangular2-services

Exploring Bootstrap datatables to search through nested table data with Codeigniter

I have implemented a table using bootstrap datatables and successfully enabled search functionality within the table. However, I have also included nested tables within each row of the main table. These nested tables are supposed to be displayed when clic ...

javascriptjqueryhtmltwitter-bootstrapcodeigniter

A guide to setting up a Python CGI web server on a Windows operating system

I am looking to set up a basic Python server on a Windows system to test CGI scripts that will ultimately run on a Unix environment. However, when I access the site, it displays a blank page with no source code visible. I am struggling to identify the issu ...

pythonhtmlpython-3.xwebservercgi

Within the mobile view, a button with accompanying description will be discreetly concealed

Working on an ASP.NET Core MVC project, with a FAQ section in the view displayed as follows: <div class="container"> <div class="row "> <div class="col-xl-2 mx-auto d-none d-sm-block"> ...

htmlcssasp.net-corebootstrap-4

Troubden array filtration in Angular is malfunctioning

I recently developed an angular "filter component" intended to filter an array and display its contents. The keyword used to filter the array, value, is obtained from another component through a service. While the HTML displays both the value and the entir ...

javascriptangular

Styling CSS: Adjusting font sizes for placeholders and text boxes

I am struggling with styling an input field to have a font size of 45px while the placeholder text inside it should be 18px and vertically aligned in the middle. Unfortunately, my current code is not working in Chrome and Opera. Can anyone offer a solutio ...

htmlcssvertical-alignmentplaceholder

Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

I'm in the process of developing a basic contact form that includes input fields for name and subject, as well as a send button (which is an <a> element inside a <div>. I am utilizing an <a> tag because I intend to use mailto functio ...

javascripthtmlcssmailto

The HTML div captured with html2canvas is incomplete

I am currently developing a meme editor website utilizing the html2canvas library available at Below is the HTML code for the div I aim to capture: <div class="container"> <div id="theUserMeme"> <div class=& ...

javascripthtmlhtml2canvas

Progressing through the Material UI LinearProgress bar in steps

How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png I attempted using this code but couldn't find an option for splitting: <LinearProgress variant="determinate" classes={{ ...

cssreactjsmaterial-ui