CSS Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

One line space on the first column

This is my page-style.css

body{
    background: rgb(54,215,183);
    font-size: 1.3em;
    font-family: sans-serif;
    margin: 40px 0;
}

.main{
    margin: 20px auto;
    padding: 20px;
    background: rgb(46,204,113);
    max-width: 80%;
    border:10px solid rgb(22,160,133);
    border-radius: 10px;
}

This is my style.css

.main{
    -webkit-column-count: 3;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 2px dotted rgb(135,211,124); 
    -webkit-column-width:250px;
}

img{
    display: block;
    margin: 1.5em 0;
    max-width:100%;
}

h1{
    -webkit-column-span: all;
}

This is my HTML

<!DOCTYPE html>
<html>
<head>
    <title>Multi-column Layout</title>
    <link rel="stylesheet" type="text/css" href="page-style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class ="main">
        <h1>Testing</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra maximus tortor, vel mattis odio viverra vel. Praesent eu sapien sed enim maximus iaculis.</p>
        <img src="julian.JPG">
        <p>Phasellus ligula nibh, interdum quis accumsan nec, vulputate maximus neque. Aenean sagittis augue a elit ornare consectetur. Nam elementum, justo eu rhoncus sodales, odio urna fringilla dolor, at condimentum nisi odio a velit. </p>
        <p>Ut hendrerit consequat tempus. Phasellus vestibulum arcu fringilla neque pretium, in accumsan magna vestibulum. Duis in varius dui.]</p>
    </div>
</body>
</html>

So my question is when I divided my main into 3 columns, the first column on the left side seems to have like a break line on top of the sentence. So the second and third column is higher compare to the first column.

What am I missing?

1 Answer

Chris Shaw
Chris Shaw
26,642 Points

Hi Julian,

This is happening because the paragraph elements have a top margin by default, if you use a selector like the below one to remove this margin it will align all the columns the same way.

.main p {
  margin-top: 0;
}

Awesome! It solves my problem. Thanks Chris!