Display block shift in text

Alright I may just caring to much about a simple nuance of changing a paragraph tag to display block. Notice how the text shifts a bit. I am wondering why, and are there any workarounds that will remove this, across all browsers? My CSS is:

p{display: inline-block;}


p{display: inline;}

Has the similar same effect and instead moves the text up.

is not that simple.

Changing display also changes the way other properties are interpreted. vertical margin will have an effect on inline-blocks, as will vertical padding. they maybe getting applied here ( remember that P tags have margin applied to them by default too)

hope that helps

As Dresden said the default top margin on the p element (applied by most browsers) comes into effect once you make the p display:inline-block or display:block. Vertical margins have no effect on inline elements so the inline element is not shifted.

If you remove the margins from the p element the text should appear the same but you would be better off having both segments as display:inline-block instead and then apply suitable margins as required.

That is neat, I did not know when displaying inline the top and bottom margins do not apply. :eye:
Thanks everyone