Multi-column layout: unwanted line-break in first column

Paragraphs are block elements and they have top and bottom margins internally set to, well, make them look and behave like paragraphs.

To counter this for your use case you could set the <p> tags to display: inline but this would remove the margins for all your paragraphs so this is not realistic as there would be no separation at all.

Alternatively, you could use <span> tags. Although this would have the same effect as above where the paragraphs would bleed together.

So for this example I would suggest using the following:

.main > p:first-child {

  margin-top: 0;

}


.main > p:last-child {

  margin-bottom: 0;

}

This way we only remove the "offending" white-space while keeping the rest of the layout display intact.

View the result: http://codepen.io/seantunwin/pen/KBCca *

• I added a border and a little padding to the container
• You could add some additional padding-top (1em looked balanced to me) to the container to balance out the white-space the at the bottom OR remove the margin-bottom for all <p> tags, as long as you don't adjust the margin-top for all <p> tags, aside from the first, then it will still look appealing when screen-size is adjusted or reduced (column fluidity).

Thanks Sean! Got it!

Worked like a beauty Sean! Thanks for sharing, I was having the same trouble.