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/
Comments
Post a Comment