Amazin Posted January 10, 2015 Share Posted January 10, 2015 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 10, 2015 Share Posted January 10, 2015 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2015 Share Posted January 10, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 10, 2015 Share Posted January 10, 2015 Using line-height: works for increasing height vertically on inline elements themselves, or the the inline elements parent. Link to comment Share on other sites More sharing options...
Amazin Posted January 11, 2015 Author Share Posted January 11, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2015 Share Posted January 11, 2015 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. Link to comment Share on other sites More sharing options...
Amazin Posted January 11, 2015 Author Share Posted January 11, 2015 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. Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2015 Share Posted January 11, 2015 Set text-align to center on the element that contains the buttons.( #first in this case) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now