Varied spacing between horizontal and vertical items in a list

The issue with the spacing between horizontal and vertical list items is perplexing. Despite having identical margin, padding, height, and width, they seem to display differently. While manual adjustment of margins or paddings can resolve this, I am curious why they are not consistent to begin with. Is there a straightforward method to ensure uniformity in spacing? Thank you.

HTML

<ul class="horizontal">
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="clear"></div>
<ul class="vertical">
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul li {
    padding: 0;
    margin: 10px;
    width: 13px;
    height: 13px;
    background: #333333;
    border-radius: 50%;
}

.horizontal li {
    float: left;
}

View the outcome here: http://jsfiddle.net/bingjie2680/3ZbkQ/

Answer №1

The vertical li's margins experience collapsing, but there is a way to work around it:

.vertical li {
    float: left; /*using a floated box prevents margin collapse with other boxes*/
    clear: left; /*forces each subsequent li element onto a new line,
                   not necessary for the first one*/
}

Check out the updated fiddle here

Answer №2

Take a look at this resource: The reason for the collapsing of your vertical margins is due to the proximity of your elements. Unlike vertical margins, horizontal margins do not exhibit this collapsing behavior.

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

Click the button in Javascript to add new content

I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...

Is the jSON data featured at the top with DIV / Table Headers positioned at the bottom?

I'm really struggling with this issue. I've tried a few different things but nothing seems to work. Any suggestions on how to tackle this problem? Here's a link to a screenshot of the error I'm encountering... <div class="contain ...

Stop Bootstrap 4 from automatically wrapping columns to the next row

I'm experiencing an issue with a component using Bootstrap 4 where a column is expanding to another row due to the presence of a long text element with the "text-truncate" class. This results in Chrome vertically stacking the column below its intended ...

How can I convert a PHP class into inline CSS styles?

While exploring MailChimp's css inliner at , I found myself curious if there are any available classes that can achieve the same result. It would be convenient to have this functionality directly in my email code without relying on MailChimp. I am es ...

Using JavaScript to convert the text within a div into negative HTML code

I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">&#43;</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...

Transform website code into email-friendly HTML code

Is there any software available that can convert web HTML and CSS files to email HTML with inline CSS? This would allow the email to be viewable on various email clients such as Outlook, Thunderbird, Gmail, Yahoo, Hotmail, etc. I want to write my code lik ...

fragment of the visual display

Are you aware that by utilizing the canvas tag in HTML5, it is possible to load a small portion of a large image with minimal load times? This can be advantageous when creating a game with just a few tiles but of considerable size, as it reduces the numb ...

Can a link be stored in a table using PHP?

I need assistance in organizing a page with a sidebar containing about 20 links as the code appears messy. Is there a way to store all <a href=.... in a table, an array, or another method for better organization? If anyone could provide an example, it ...

Tips for rotating a canvas object without changing its position

I am currently in the process of developing a JavaScript game centered around a character positioned on top of the world. Although the earth element is already part of the game, I am encountering an issue with its rotation causing it to shift position as w ...

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

Limiting the use of CSS selectors to a single class without the need to include the class name multiple

I am trying to find a solution to avoid repeating the same class name multiple times in CSS. For instance, if I have: .class1 div { color: red } .class1 h2 { color: blue } .class1 p { color: yellow } Is there a way to consolidate these three rules under ...

Guide on syncing Bootstrap 4 sliders using a single set of controls

Is it possible to synchronize a bootstrap 4 carousel with controls to a carousel without any controls? 1) When the control arrows are clicked, both carousels will slide simultaneously. 2) Hovering over either carousel will pause both carousels from slidi ...

Is there a way to allow only the block code to shift while keeping the other span tags stationary?

Is it possible to change the text without affecting other span tags in the code? I want to make sure only this specific text is updated. How can I achieve that? var para_values = [ { content: "BRAND " }, { content: "MISSION" } ]; functi ...

Chrome glitch: how to make radio buttons bigger

Hey there! I'm having a little trouble trying to increase the size of my radio button using this CSS code. It seems to work in Mozilla, but not in Chrome. .rdo { margin: 1em 1em 1em 0; transform: scale(1.3, 1.3); -moz-transform: scale(1.3, 1.3); -ms- ...

Halt the CSS transition on the preceding element

I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way? However, I couldn't make it work for my code. I suspect the issue lies with the before element. What cou ...

Unexpected issue with accessing the jQuery class descendant

I am currently developing a photo gallery and I am trying to add some CSS styling to the first photo that is visible within my #wrapper div. Below is the code snippet I have been working on: $('.inside:first-of-type>div:nth-of-type(1)').css(& ...

Achieve the appearance of table-like alignment without the need for traditional tables

Any ideas on how to achieve the following layout: <table border="0"> <tbody> <tr> <td style="margin-right:5px;"> <h2 id="optiona" class="option optiona optiona2">a. aa </h2> </td> ...

What is the process for updating a particular div element?

I am currently developing a webpage that allows users to select an item, and the relevant information will be displayed. On this page, I have incorporated two buttons: btnBuy0 and btnBuy1. The functionality I am aiming for is that when BtnBuy0 is clicked ...

How to center an HTML header

Currently working on a one-page scrollable website, aiming to have the first page consist of a navbar, image, and header. The challenge I'm facing is centered around aligning the header vertically. Although I managed to center it horizontally, the ver ...

Utilizing consistent form elements throughout various tabs

I'm working on an HTML project where I need to replicate form elements across different tabs with each tab having unique values. To achieve this, I found a helpful resource at . Here is what I've attempted: <html> <link rel="stylesheet" ...