html - what is the point to have padding 2px top and bottom -


in declaration "#message a" have style padding looks this

padding: 2px 15px;  

so point have padding top , bottom when there no change in appearance. if change padding

"padding: 100px 15px;"  

this 100px doesn't make change in appearance. 15px correct , make change in appearance.

<!doctype> <html> <head> <title>chapter 3: expandable rows</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body  {    margin:5px;    padding: 0;    font-family: arial, sans-serif;    font-size: small;    text-align: center;    width: 768px; }  #register  {  float: left; width: 100%; margin:0; padding: 0; list-style: none; color: #690; background: #bddb62; }  #register  { text-decoration: none; color: #360; }  #reg  { float: left; margin: 0; padding: 8px 14px; }  #find  { float: right; margin: 0; padding: 8px 14px; }   #message  {     clear:both;     font-weight: bold;     font-size:110%;     color:#fff;     text-align: center;     background: #92b91c; }   #message p  { margin: 0; padding: 8px 14px; }  #message strong  { text-transform: uppercase; }  #message  { margin: 0 0 0 6px; padding: 2px 15px; text-decoration: none; font-weight: normal; color: #fff; }  </style> </head>  <body>  <ul id="register">     <li id="reg">not registered? <a href="#">register</a> now!</li>     <li id="find"><a href="#">find store</a></li> </ul>  <div id="message">     <p><strong>special week:</strong> $2 shipping on orders! <a   href="#">learn more</a></p> </div>`enter code here` </body> </html> 

the anchor tag inline element not display vertical padding.

while padding can applied sides of inline element, left , right padding have effect on surrounding content.

to see vertical padding applied change a display:inline-block.

#message a{    padding: 2px 15px;    display: inline-block; } 

example http://jsfiddle.net/sl7kt/

see article on how css properties applied inline elements.


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -