What is the origin of this extra space?

I'm having difficulty identifying the source of the extra space at the top-front of my first column.
It seems like both columns should start on the same line.

Let's not focus on the margin values right now.
They were set to align the content horizontally within the container.

@import url('//fonts.googleapis.com/css?family=Roboto');
.column {
  font: 12px 'Roboto';
  column-count: 2;
  column-gap: 2em;
  max-width: 52%;
  min-width: 300px;
  margin: 30px 0 auto 25%;
}

Ignore this comment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sem rhoncus orci dapibus posuere ut id justo...

View on JSFiddle

Answer №1

By default, the p tag has a margin applied to the first column of your div, specifically the margin-top. You may also notice a margin-bottom applied to the second column:

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

To avoid this behavior, you can apply the column property to the p instead of the div:

@import url('https://fonts.googleapis.com/css?family=Roboto');
.column {
  column-gap: 2em;
  max-width: 52%;
  min-width: 300px;
  margin: 30px 0 auto 25%;
}

p {
  font: 12px 'Roboto';
  column-count: 2;
}
<div class="column">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sem rhoncus orci dapibus posuere ut id justo. Maecenas in venenatis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean dignissim neque
    sit amet erat placerat hendrerit. Mauris faucibus id elit quis varius. Praesent egestas eu nunc sit amet fermentum. Duis ac hendrerit orci. Nulla sed metus ullamcorper, molestie dolor vitae, lobortis tellus. Aliquam sagittis tortor eu lectus rhoncus,
    et ullamcorper ante rutrum. Etiam tincidunt rhoncus ligula, scelerisque molestie quam. Etiam a nisl in nibh congue pulvinar sit amet non nibh. Vivamus vel tincidunt sapien. Nullam leo ipsum, tincidunt molestie fermentum a, cursus quis ipsum.</p>

</div>

Answer №2

Dividing content into two columns is achieved by using a single paragraph element styled as two columns. The gap above the first column results from the margin-top applied to that specific column. To remove this gap, simply add margin-top: 0 to the paragraph style.

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

Exploring tags integration in Angular and NodeJS

I want to enhance my question posts by including tags, similar to the ones found here. I am using html, angular, and node.js. My goal is for each tag entered by a user to be checked against the database to see if it already exists. If not, the user should ...

Angular 11 component encountering issues with accessing server-side data

Recently, I encountered an issue when trying to connect the PHP API with the Angular service to retrieve data from the database. I am uncertain whether the problem lies within the service, the component.ts file, or the HTML section. Therefore, I have share ...

Tags for classes are not appearing or being activated on my website

I recently purchased a template from casethemes () and I am experiencing an issue. Despite using the same tags as their demo site, the classes are not being executed properly and appear broken on my website. Could it be that I am missing some necessary lib ...

The fixed navbar in Bootstrap is too wide for the HTML content, resulting in horizontal overflow

My website has a fixed-top navbar that appears wider than my actual HTML tag. I suspect there may be an issue between the navbar and my bootstrap modal, but I am unsure how to resolve it. The wider navbar causes a white space to appear on the right side o ...

Round shield progress indicator

https://i.sstatic.net/D3GCr.png I have been trying to create a progress bar by overlaying one SVG on top of another (one translucent and the other colored). Despite many attempts, I have not been successful in solving this problem. Any help or solutions w ...

What is the best way to utilize a variable declared in a JavaScript file within an HTML document?

Here is the content of my JavaScript file: var moment = require("moment") var structuredDate = moment(Date()).format("LLLL") I am trying to dynamically update a <div> element in my HTML with the date value. This is what I attem ...

What is the best way to access the URL of the source page?

How can I retrieve the source page URL when navigating to any page within a specific domain? I've attempted using this jQuery code: $(document).ready(function() { var referrer = document.referrer; }); However, this only returns the previous URL, wh ...

Creating iPhone style form elements using HTML

Thinking of replicating the form elements from iPhone using HTML/CSS but wondering if it already exists out there. I searched online but couldn't find anything. Has anyone come across something similar before? ...

Finding the correct value in Ajax is proving to be a challenge

In my development of a doctor management system, I am encountering an issue with updating the date field based on changes in the selected doctor. The system includes three form fields: department, doctor, and doctor_time. Through AJAX, I have successfully ...

What methods exist to enable individuals to upload files independently through an online form?

I am in the process of creating a support contact form that includes file uploads. The file upload functionality is handled using AJAX, allowing users to upload files and then submit the form when they are ready. However, the current layout where the uploa ...

Learn the process of sending information to a MySQL table using a select tag in PHP

I am attempting to use a select tag to submit data to a MySQL table using PHP. I have been successful in inserting data using the text type with the following code: <td> <label class="control-label">Image Type </label> </td> &l ...

What is the best way to determine the location of just one element?

I am currently working on a rating application where only the selected circle should remain green, not all of them. $('#rating-container').click(function () { var element = $('#target'); var container = $('#rating-containe ...

JavaScript - Modifying Text within a Dropdown Menu

I'm currently working with a code that generates a dropdown menu/selector. Upon selecting an option, the main display should change accordingly. While I can't directly modify the code, I have the ability to use JQuery to alter the displayed text. ...

Dynamic CSS class alteration on scrolling using Vue.js

I am currently in the process of developing a web application using vueJs and bootstrap. I am interested in figuring out how to dynamically change the CSS class of an element based on scrolling behavior. Is there a vue-specific method that can achieve this ...

Simple php/html form without any fancy features

As a beginner in php/html, I am eager to learn how to create and process an html form. Recently, I set up a new folder named Website. Within this folder, I created an index.html file and a submit.php file. (reference: http://www.w3schools.com/php/php_for ...

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

Customizing button styles with JQuery: A step-by-step guide

Hey, I'm working on implementing a button on my webpage and here's the code: <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis ...

Utilize Bootstrap 4 to seamlessly integrate a small element between two lengthy items in a row, ensuring a gap

I would like to achieve a similar look to this design. https://i.sstatic.net/p1hq4.png hr { border: none; color: black; background-color: black; height: 5px; margin-top: 10px; } <div class="row code-line"> <div class="col-5 ...

Inject an HTML or jade webpage into a div within another HTML or jade webpage

I'm facing an issue in my Node.js project with a script (JS) that is responsible for loading a Jade page into a div of another Jade page using $("#div").load(directory). Despite specifying the directory of the jade page to be loaded, I keep getting an ...

Just a single page on my website extends beyond the footer's reach

Hey there, I'm pretty new to this whole HTML/CSS thing and need some help. I have a website called cme.horse and everything seems to be running smoothly except for the Home page (main/index page). The issue is that it scrolls past the footer, while al ...