This is the Demo.
I want to align the two <p> element in the same line, but you can see the second one moves down a little bit. Anybody knows the reason?
HTML
<div class="logo">
<p>Hello world</p>
<p class="web_address">Hello all</p>
</div>
CSS
.logo p {
margin:0;
padding:0;
border: solid 1px black;
margin-left: 20px;
font-size: 36px;
display: inline-block;
line-height: 80px;
}
Inline(-block) elements (the paragraphs in this case) are aligned vertically in their baseline by default. You could add vertical-align: top; to fix the alignment issue.
.logo p {
/* other styles goes here... */
display: inline-block;
vertical-align: top;
}
For further details you can refer this answer.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments