CODEWITHSUNDEEP
htmlcss
Juan Ignacio Mignaco Fernández
Juan Ignacio Mignaco Fernández

Reputation: 416

CSS: div p, a not applying to a tag

I have a very simple HTML with CSS code, don't understand why, the css rule isn't applied to the a tag, but it works on p tags. If I wrap the a tag inside a p tag, the css works, but I can't understand why it doesn't work without wrapping it.

Here's a full example http://jsfiddle.net/juaning/84Xn2/

css: div p, a { margin-top: 35px; font-size: 24px; }

html: <div class="family"> <a href="https://www.facebook.com/codecademy">Luigi</a> </div>

Upvotes: 0

Views: 535

Answers (5)

Atif
Atif

Reputation: 1220

Another solution replace your code "div p, a" by following

div p, div a { font-size: 24px; line-height: 100px; display: inline; }

Notice I used line-height (same as box height) to make vertical align center rather than margin-top. But this is not the solution for multi line.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

a tag is an inline element, and p is a block level element, margin won't apply to inline element, and hence you need to make your a tag, block or inline-block.

div p, a {
    margin-top: 35px;
    font-size: 24px;
    display: block;
}

Now, here, again it depends, what you want your a tag to be, if you want multiple a tags to line up inside your div you will have to use inline-block and if you use display: block; it will take entire horizontal space and will render another element below it.

Take for example you've a horizontal menu, where you line up your elements, you will probably use ul and li but suppose you take div for each menu item, you may need display: inline-block;, this will have all properties of block level element, but it will render them inline leaving the other space empty for other elements to take up, but if you want to render each element below one another, you need to use display: block;(not for div tag or p tag, they are block level elements by default, inorder to change their behavior, you need to mention that in your CSS)

List of block level elements

List of inline elements

Upvotes: 2

AmazingDreams
AmazingDreams

Reputation: 3204

The box model of an a tag is different than the box model of a p tag. Add this one line:

div p, a {
    display: inline-block;

By default, an a tag has the display: inline box model, so that you can easily place it in the same line as regular text (i.e. inside a p). The p tag is more of an entity on it's own, always being a 'block' or 'box' of text, therefore the p has display: block; by default.

Fiddle: http://jsfiddle.net/ECAbd/1/

Upvotes: 4

codeomnitrix
codeomnitrix

Reputation: 4249

Add this rule to the css - 

display: block;

Upvotes: 0

Chris Hayes
Chris Hayes

Reputation: 12050

Anchors have display: inline by default, while paragraphs are (if I recall) display: inline-block. Margins do not apply to inline elements. You can easily fix this by explicitly setting display to inline-block in your CSS.

Upvotes: 1

Related Questions