hi,
I am working on a book with text and lots of images. On the CSS, I have added space after and space before the image (so that it is not too close to the text).

Now, the images that appear on the top of the page have some space before (and therefore, these images don't start exactly at the beginning of the page).

Is there a css selector that can be used to know the image is on the top of page? Or any other tip to fix this?
Thanks!

Are you using margin or padding?

Margin will collapse with the page margins, so it should work better than padding in this situation.

I am using margin, but the thing is that images are inside p tags. I couldn't make it work (if the image is at the top of the page, they will start lower than the normal text).
If there is any tip to fix this, it would be great!
thanks

by reading other posts, I guess it's not possible to make the img margin collapse with the page margins, if the margin is applied to an img inside a p tag?

Perhaps try "display: block" on the image?

it worked!!
However with "display: block" on the image, it seems I am losing the text-align and indent in the p tag.
Is there a way to keep those?

Hmm this is getting tricky. Can you attach a screenshot of the layouts you are getting before and after applying display: block?

please see screenshots attached.

- no display: the p text-align is ok (centered, in this case). But the margin-top of the image in the top of the page should be removed

- display block: the margin-top is removed ok, but the p text-align is not working any more.

Just in case, the img is inside a p tag (where the text-align is applied).

1. display block.png‎ 283.0 kB
2. no display.png‎ 283.6 kB

Okay, perhaps you could split the paragraph into two, like this:

<p>first part</p>
<div style="margin-top: ...; text-align: center"><img/></div>
<p>second part</p>

Alternatively, you can use "margin-left: auto; margin-right: auto" to center the image.

hi Mike, thanks. Actually as I cannot change the html, I will use the second option. For this, is there a way to apply some conditional like this? (in order to only apply these margins auto to p tags with text-align center, that have an img inside)

p[text-align=center] img {
margin-left: auto; margin-right: auto;
}

(I tried this code but no luck)

(Actually I meant: applying the margins auto to an img inside a p tag with text-align)

I found it! Thanks a lot for all the tips