can't use width and height in inline elements, but why?

[Amazin]

I was trying to style my links and when I tried to include width and height into it, it doesn't respond to it. So I googled it as why that is the case and someone mentioned that you can't because the (a) tag is an inline element.

 

so if you want to add height and width to it you need to:

 

display:inline-block; or display:block;.

 

I don't quite understand, inline elements are the one where they only take up space and height within the line but that doesn't mean we can't add width and height to it. Maybe I care too much but is there a reason for this?

[dsonesuk]

You use padding or margins, to give extra spacing instead of height: or width: inline element like span, anchor, strong, em are usually within a block element such as <p>, block elements stretch to the width available to it within the parent it is in, inline elements only stretch to content they surround

[Ingolme]

Inline elements can have padding and margin, but only the horizontal padding and margin have a visual effect.

 

You can change the element to be an inline-block using the display property. Inline-blocks can have width, height, padding and margin without any problem.

[dsonesuk]

Using line-height: works for increasing height vertically on inline elements themselves, or the the inline elements parent.

[Amazin]

thank you all for your informative responses. I learned alot. I would really appreciate it if you can help me out bit here:

 

 

as you can there are 4 "buttons" p1-p4 I created. I want to make them more rectangular. so I'm trying to make them longer/horizontal. what attributes must I change in order to make it happen?

 

here are my codes:

 

 

#first ul li { display: inline-block; list-style-type: none; margin-right: 10px; }#first ul { margin: 0; padding-left: 0px; list-style-type: none; }#first a:link { text-decoration: none; background-color: #C2C2A3; border-style: ridge; border-width: 10px; line-height: 4px; }

 

<div id="first"><ul><li><a href=#>p1</a></li><li><a href=#>p2</a></li><li><a href=#>p3</a></li><li><a href=#>p4</a></li></ul></div>

 

I experiemented with paddings and it worked to a degree.

 

 

#first a:link { text-decoration: none; background-color: #C2C2A3; border-style: ridge; border-width: 10px; padding-left: 5px; padding-right: 5px; padding-top: 1px; padding-bottom: 1px; }

 

the space between top and bottom stopped closing in after 1px. when I tried -1px and beyond, it stopped responding. not sure what I'm doing wrong here but maybe I need to change the font size?

Edited January 11, 2015 by Amazin

[Ingolme]

The <a> element is inline and that's the one you're putting the border on. What you want to do is put the border on a block element. You can turn your <a> element into an inline-block.

You can't use negative values for padding. If you want to make the box even less tall then you'll have to set the height or line-height to a small value.

 

Drop the :link selector, because if you don't then all the styles you set will vanish when the mouse hovers over the link.

[Amazin]

thanks Fox mod, I change it to inline block and it certainly made things lot easier.

 

 

I finally shaped the boxes the way I wanted by changing few basic attributes.with width and heights now I got another slight problem, how do I put the text exactly in the centre of the box? i used text-align: centre; but it is not the centre of the whole box.

[Ingolme]

Set text-align to center on the element that contains the buttons.( #first in this case)