CODEWITHSUNDEEP
html
Matt Helm
Matt Helm

Reputation: 47

HTML - Images Won't Align with Paragraph Text

When I have text beside an image and set them at the same point on the screen, why don't they align properly at the top of their containing div? The text appears to be a pixel or two lower than the image. Is it because of the hight of the text?

The site I am concerned with is below. I want the top of the head-shots to align with the top of the bios. Any ideas?

http://www.fiveholeforfood.com/the-team/

Upvotes: 0

Views: 348

Answers (3)

Berzemus
Berzemus

Reputation: 3658

It rather seems to be font-related, perhaps the ascent line is pushing the font down.

If so, there's nothing that can be done about it except adjusting the margins & padding’s applied to your elements to move the text some pixels upwards. Changing fonts or maybe even font-sizes would ruin the effect though.

Upvotes: 0

Simon
Simon

Reputation: 661

The line- height is pushing it down a couple of px but if you want to keep that for ease of reading I'd give the paragraphs a -5px margin on the top

#content .single p {
    line-height: 1.5em;
    margin-bottom: 10px;
    margin-top: -5px;

Upvotes: 0

Teneff
Teneff

Reputation: 32158

That's because of the line-height

Upvotes: 1

Related Questions