CODEWITHSUNDEEP
htmlcss
Bluebug
Bluebug

Reputation: 295

Where is this space coming from?

I can't understand where the space is coming from at the top-front of my first column.
Both columns should begin at the same horizontal line.

Ignore the margin values.
That was for aligning it horizontally with the rest of 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%;
}
<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>

View on JSFiddle

Upvotes: 1

Views: 61

Answers (2)

Temani Afif
Temani Afif

Reputation: 272648

This is simply the default margin of p tag applied to the first column of your div. More precisely the margin-top as you may also notice a margin-bottom applied to the second column:

enter image description here

You can apply your column property to the p instead of the div to avoid this behavior:

@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>

Upvotes: 5

pavger
pavger

Reputation: 684

The 2 columns is just one paragraph element split into two columns. The space above the first one is just the margin-top on the first column. Just give the paragraph a margin-top: 0;

Upvotes: 2

Related Questions