How to align text vertically in columns by utilizing the column-count CSS property?

Utilizing the CSS column-count property, I have divided text into four columns on an HTML page.

The issue is that the first column always seems to be slightly lower than the other three columns.

To illustrate the problem in a straightforward manner, check out the simplified example below or visit this JSFiddle.

Why does this discrepancy occur and what can be done to align all columns evenly?

.column-text{
  column-count: 4;
  column-gap: 10px;
  column-rule: 1px dotted #d5d5d5;
  font-size: large;
}
<div class="column-text">
  <div>
    <p>Why am I lower</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
</div>

htmlcss

Answer №1

To eliminate the margin on the first paragraph, you can use this CSS code snippet: 

.column-text div:first-child p:first-child { margin: 0; }

.column-text{
  column-count: 4;
  column-gap: 10px;
  column-rule: 1px dotted #d5d5d5;
  font-size: large;
}

.column-text div:first-child p:first-child {
  margin: 0;
}
<div class="column-text">
  <div>
    <p>Why am I positioned lower?</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
</div>

Answer №2

The vertical margin of <p> tags is being discussed here. Typically, these margins collapse in certain scenarios, following the standard margin behavior.

Answer №3

When viewed in JS Fiddle, it appears that the margins of the surrounding elements are encroaching on the parent container.

To resolve this issue, you may want to consider implementing the following CSS:

.column-text p {
  display: inline-block;
}

This adjustment should help maintain a consistent appearance for all elements involved.

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

Tips for achieving seamless expansion and eliminating grid row gaps by utilizing hidden elements in CSS

I'm currently developing a web design that includes a section with both visible and hidden content. I've added a button to smoothly reveal the hidden content using a transition effect. However, I'm encountering a couple of challenges: Even ...

javascripthtmlcssgrid

Can you summarize HTML DOM and jQuery DOM in a single sentence?

I've encountered a challenge while working on my Javascript code with a HTML5 canvas and jQuery. I am currently using getElementById to access the canvas and $('canvas') to apply a jQuery function to it. The issue arises when I realize that ...

javascriptjqueryhtmlcanvas

The priority of custom attributes in HTML

There seems to be some ambiguity regarding whether data- attributes should be considered primary or secondary syntax. Is there a defined standard for this in major frameworks like Angular? For example, if an attribute is specified as both my-attr and dat ...

javascripthtmldom

Grid layout with card tiles similar to Google Plus

I'm looking to develop a scrolling grid with card tiles similar to Google Plus that has three columns. I am currently using Material UI, but I can't seem to find the right functionality for this. I have experimented with the standard Material UI ...

javascriptcssmaterial-designmaterial-uicss-grid

What is the best way to make img-fluid function properly within Bootstrap Carousel?

I've been struggling to make my carousel images responsive by using the img-fluid tag, but I haven't had any success. I've attempted using !important and display: block, but nothing seems to work. I'm not sure what's causing the is ...

javascripthtmlcssbootstrap-4

The pair of divs with distinct backgrounds

Looking to customize the navigation on my website by creating a separate background for the list links menu and making sure the left part of the navigation with the logo has its own distinct background that extends until the next div. I've experimente ...

htmlcss

Location appearing feature activated by clicking on navigation buttons

I've been having trouble getting the navigation locations to appear and disappear. I'm not very familiar with JavaScript, but I suspect that's the issue. My goal is to make the locations (WebDesign, Photography, SketchUp, Photoshop, About, H ...

javascripthtmlcss

Why does the CSS responsive menu appear and disappear?

As I prepare to launch this website, I have put in a lot of effort to ensure responsiveness throughout the design. One key aspect is the menu, which is designed to be responsive and display a "burger" icon when the screen size is too small to show all menu ...

cssmenuresponsive-design

Angular will move the input field cursor to the beginning after typing 4 digits

I'm looking for some guidance with a specific scenario involving a reactive form input field. The field is meant to capture the last four digits of a Social Security Number (SSN), and upon filling it out, an API call is triggered to validate the enter ...

javascripthtmlangulartypescriptforms

Using JQuery, you can predominantly focus on an html element by referencing its title tag

Is it possible to target an HTML element based on its title tag? Consider the following example: <a class="cat" title="categoryName">categoryName</a> How can we select this anchor element by its title tag and then add some text to it? I att ...

jqueryhtmltagsappendtitle

Why is my Javascript XMLHttpRequest onreadystatechanged event not triggering?

I am facing an issue with my html file and a .txt file stored in the same directory on a webserver. In the html file, I have the following code: <html> <head> <script> window.onload = function() { receiveMessage(); } function recei ...

javascripthtmlajax

Django Ajax button fails to add item on initial click

My Django project features a dynamically rendered table for order items on the Cart page. Each item in the table displays the quantity, product name, total price, and more. To modify the quantity, I've implemented "add" and "subtract" buttons. Below i ...

pythonhtmljquerydjangoajax

Creating a CSS circle spinner with a half moon shape is an innovative way to add a unique touch

Image: Circular spinner rotating along the border rim of other solid circle For more details, please visit: https://codepen.io/sadashivjp/pen/oqqzwg I have created a UI codepen here and welcome any modifications or solutions. The code snippet is provided ...

javascriptjquerycsshtml

I am eager to run the code that I retrieved from the server. I have access to the code in my console and I desire for it to execute on the main browser page

Currently, I have a simple Google Chrome Extension that includes a button. By using AJAX, I am fetching a script from a server in my browser's console. Essentially, clicking on the extension reveals a button which, when clicked, fetches the script fro ...

javascripthtmlcssajaxgoogle-chrome-extension

What is the best way to implement this design using CSS flexbox?

I'm working on designing a simple layout that looks like this: https://i.stack.imgur.com/oCzyV.png Currently, I have the following HTML structure with some variations in class names and additional markup within each element: <div class="site ...

htmlcsslayoutflexbox

The initial item in the Materializecss slider is failing to display

Currently, I am attempting to implement materialize slider with skrollr. The setup is functional; however, only the first item of the slider is set to opacity: 0 initially. https://i.stack.imgur.com/urSww.jpg After a brief delay, the second item becomes ...

jquerycssslidermaterialize

Issues with animation functionality in Google Chrome

Does anyone know why the blink effect isn't working on Google Chrome? <p class="blink">at least it's not Comic Sans</p> <style> .blink { animation-duration: 1s; animation-name: blink; animation-iteration-count: infinite; anima ...

htmlcssgoogle-chrome

Select your vehicle from the drop-down menu

Seeking assistance with a Javascript drop-down selector for vehicle make, model, and year. The goal is to dynamically generate a link based on the user's selections. I'm struggling with implementing the year selection without replacing the model. ...

jqueryhtmldropdown

What does the visual representation of <html> look like, exactly?

Where does the scroll bar belong, within the <html> or <body> tags? I've always included it in every HTML file, but unsure of its specific purpose. ...

html

`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing: Here is the HTML code: <div class="parent_process"> <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fi ...

htmlcss