Kevin Powell - Community•4mo ago

Remove margin on top of column 2

There is a div container with text that has 2 columns at sufficient widths. I don't want orphans on the second column so I set

.intro p {
    margin-top: 0;
    text-align: left;
    orphans: 3;
    widows: 3;
    break-inside: avoid-column;
}

.intro p {
    margin-top: 0;
    text-align: left;
    orphans: 3;
    widows: 3;
    break-inside: avoid-column;
}

Now there is a margin on top of the second column, that probably is the bottom margin of the previous paragraph. How do I prevent this margin to show, I want the columns to start at same height. Thanks for any reply.

2 Replies

MarkBoots•4mo ago

can you please make a codepen so we can play with it (just the relevant part)

Frank Harland•4mo ago

The solution was simple, use display: inline-block; on the paragraphs. This removes the top margin for the first paragraph on the new column.

Gaming

Programming

Remove margin on top of column 2