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>