CODEWITHSUNDEEP
htmlcss
prime
prime

Reputation: 15574

how to make <p> tag and <a> tag inside a <div> inline

I have this html code

As you can see the <p> tag element and the <a> tag element is not inline. <a> tag element is little bit higher than <p>.

Is there an easy way to make them inline. I can do it by changing CSS. But it is not neat i think.

Upvotes: 1

Views: 1410

Answers (3)

ooo
ooo

Reputation: 1627

By setting the padding and margin of your <p> and <a> tags, you will be sure that they will not use the inherited and default values. After that, you can simply make them float left and right. Here is the css:

#inboxHeader{
   background-color:yellow;
   overflow:hidden;
}
#inboxCount p, #inboxNewMessage a{
    margin: 0px;
    padding: 0px;
}

#inboxCount{
   float: left;
}
#inboxNewMessage{
   float: right;
}

And here is the fiddle

Upvotes: 3

Steve Meisner
Steve Meisner

Reputation: 756

You need to set margin:0 on the p inside the div. This is added by default by the browser. Then use line-height to give it the vertical alignment you'd like.

Here is the updated fiddle.

Upvotes: 1

K. N
K. N

Reputation: 81

paragraphs has a default user agent stylesheet margin set:

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

just add a 

p, a {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

this way you can set their margins together, or define a default for your paragraph

Upvotes: 2

Related Questions