Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Padding-top not working

Tags:

html

css

padding


Why doesn't padding-top work? The height of the div is set.

HTML:

<div class="menu">     <a href="#">APIE MUS</a>     <a href="#">REKLAMA</a>     <a href="#">PARTNERIAI</a> </div> 

CSS:

 .menu {       width: 300px;       height: 30px;       background: red;  }  .menu a {       padding-top: 10px;  } 
like image 402
Mantas Kudeikis Avatar asked Jan 30 '13 12:01

Mantas Kudeikis


People also ask

What is padding-top in CSS?

An element's padding is the space between its content and its border. The padding-top property sets the top padding (space) of an element. Note: Negative values are not allowed.

Why is margin not working in CSS?

This happens because the div has no border, and no padding defined, and the CSS specification states to collapse the two top margins into a single one of the parent. (The same happens with bottom margins.)

How do you give padding only to the top and bottom?

If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.


1 Answers

Your example (with margin) does not work because you can't apply margin to inline elements like a, span, b.

Take a look:

  • http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
  • http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

To fix your issue:

Just add display:inline-block;

This value (inline-block) causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. Source: http://www.w3.org/TR/CSS2/visuren.html#inline-level

So this will fix your issue:

.menu a{     margin-top: 10px;     display:inline-block; } 
like image 116
gearsdigital Avatar answered Sep 23 '22 03:09

gearsdigital