Using CSS to create centered blocks

I have a list of blocks that I want to center without any margins, like the example below but margin-free.

ul{
  margin:0px;
  padding:0px
} 
.colors{
    padding-left: 50px;
    padding-right: 50px;
}
 .colors li{
    display: inline-block;
    list-style: none;
    height: 8px;
    width: 38px;
    margin: 0;
    padding: 0; 
}
.product{
width: 450px;
  text-align:center;
  box-shadow:0px 0px 15px rgba(0,0,0,.3);
}
<div class="product">  
  <div class="colors">                            
    <ul>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
    </ul>
  </div>
</div>

Avoid using Javascript and utilize only CSS. Currently, it's set to display:inline-block, which is causing some unwanted margins.

htmlcss

Answer №1

When you designate ul as a flex container, it will remove the white-space.

If necessary, you can apply some vertical margin to li and padding to the parent container.

ul{
  margin:0px;
  padding:0px;
    display:flex;
  justify-content:center;
  flex-wrap:wrap;
} 
.colors{
    padding-left: 50px;
    padding-right: 50px;
}
 .colors li{
    display: inline-block;
    list-style: none;
    height: 8px;
    width: 38px;
    margin: 0;
    padding: 0; 
}

.product{
width: 450px;
  text-align:center;
  box-shadow:0px 0px 15px rgba(0,0,0,.3);
}
<div class="product">  
  <div class="colors">                            
    <ul>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
    </ul>
  </div>
</div>

Answer №2

In typical browsers, a 3px gap is allocated for text spacing. However, in this scenario where there is no visible text present, you can simply include the following CSS:

ul{
  font-size:0;
}

Answer №3

To achieve this, you simply need to minify the HTML code and any unnecessary white spaces will be automatically deleted.

For example:

<div class="item"><div class="categories"><ul><li style="background-color:#ff0000;"></li><li style="background-color:#00ff00;"></li><li style="background-color:#0000ff;"></li><li style="background-color:#ffff00;"></li><li style="background-color:#ff00ff;"></li></ul></div></div>

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

Display item upon hovering and for an extended period upon clicking using jQuery

I am looking to create a functionality where hovering over an area displays item 2 for a certain duration, which is currently working fine with the existing code. However, I also want it to remain visible for a longer period if clicked, but this does not ...

jqueryhtmljquery-hover

Reacting to multiple checkboxes in a check handling system

In my latest project, I have designed a component that utilizes multiple checkboxes generated within a .map function. While testing the functionality, it came to my attention that users could select more than one checkbox at a time. This is not ideal as th ...

htmlreactjscheckboxjsx

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

Does CSS padding-top: 100% take into account the parent's width?

I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...

htmlcsspaddingstyling

Aligning a Material UI button to the far right of a row

I am struggling to align a React material-ui button to the right-most of the page and despite trying to use the justify="flex-end" attribute within the following code, it doesn't seem to be working: <Grid item justify="flex-end" ...

cssreactjsmaterial-ui

What is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

cssreactjsmantine

Element was removed upon clicking only once

Can anyone help me figure out why the behavior of .remove() with $postNav.remove(); is different here? When you click on "I'm a tag" for the first time, both the <li> and <ol> are deleted as expected. However, on the second click, only the ...

javascriptjquerycsshtml

How can we use JavaScript to add a class to the <html> element?

What is the method to apply a class to the root element <html> in JavaScript? ...

javascripthtml

Fade-in effect on one DIV element impacting the values of other div

As a newcomer to jquery and JavaScript, I'm facing some challenges in getting the desired functionality. Currently, I am trying to animate three images simultaneously - one moving downward (iphone), another fading in (shadow), and the third one animat ...

jquerycsshtmlfadeout

Could one harness the power of SO's script for adding color to code within questions?

Similar Question: Syntax highlighting code with Javascript I've observed that Stack Overflow utilizes a script to apply color coding to any code shared in questions and answers, making it resemble how it would appear in an IDE. Is this script pub ...

javascriptjqueryhtmlajax

Initiate an animation upon reaching a designated element using Jquery scroll event

Hey there! I've been trying to create an animation without using any plugins, but unfortunately, I haven't had much luck so far. Here's the code I've been working on. If anyone can help me figure this out, I'd really appreciate it ...

jqueryhtmlcss

Align the center element vertically on a website with a Bootstrap 4 navigation bar

I am trying to vertically center an element on the page. It works fine until I add a Navbar, which causes the element to be centered with an offset from the height of the Navbar. How can I center the content container vertically while accounting for the Na ...

htmlcsstwitter-bootstrap

When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same a ...

htmlcss

CSS for leaving white space at the end of one third of a container

Currently developing a website and facing an issue with the layout: I am trying to create 3 columns of equal height with each column taking up one-third of the width. However, there seems to be a small white gap on the right side of the last column. Here ...

htmlcss

Ways to incorporate vertical alignment while adjusting the size of a <div> block

Seeking advice on how to vertically align <div> blocks (green blocks in my example) when changing block size. What adjustments are needed in my example for the vertical alignment (middle) of side blocks to be maintained when resizing the browser win ...

htmlcssalignmentvertical-alignment

What is the best way to resize an image to fit its surroundings within a nested box?

Have you ever heard of a website called SPAM? It has a unique homepage that I want to replicate using JavaScript, jQuery, and some CSS. My main challenge is figuring out how to adjust the image size to match the center box on the page. I want to create th ...

javascriptcssuser-interfacelayout

CSS login validator immobilized

In my Visual Studio project, I am facing an issue with applying CSS to two requiredfield validators. I have tried using the following code: #vdtrUserLogin { top:65px; left:750; position:absolute} #vdtrPasswordLogin0 { top:65px; left:900; position:absolute ...

htmlcssvisual-studio

Eliminating unnecessary CSS classes

There are multiple references to the specific ".wiki-content" class in the stylesheet: .wiki-content ul,.wiki-content ol,.wiki-content dl { padding-top:0; margin-top:0; } .wiki-content a,.wiki-content a:link,.wiki-content a:visite ...

csshtml

Issues with Contenteditable functionality in JavaScript

My goal is to make a row editable when a button is clicked. $(":button").click(function(){ var tdvar=$(this).parent('tr').find('td'); $.each(tdvar,function(){ $(this).prop('contenteditable',true); }); }); <s ...

javascriptjqueryhtml

Could you please provide me with the option to send a list of the

Is there a way to send output via email instead of displaying it in the following div: <div id="fullCalendar" ></div> After spending a whole night searching online, I couldn't find a solution. As I'm not very familiar with jQuery pr ...

javascripthtmlajaxfullcalendarfullcalendar-3