CODEWITHSUNDEEP
htmlcss
Blue Master
Blue Master

Reputation: 61

Padding in nav bar,li and a tag

I'm learning css,and i am little confused with padding in navigation bar.

#menu ul {
height: auto;
padding: 15px 3px;
margin: 0px;
    }
  #menu li { 
display: inline; 
padding: 20px; 
 }
#menu a {
text-decoration: none;
color:white;
padding: 3px 3px 3px 3px;
 }

How i see that ul padding move all ul elements relative to border,but i m confused what realy do padding li,and a tags? Because how i understand a padding is the space beetween a href tags,but then what is padding in li?

html:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head
<title>J</title>
<style>
body { 
    background-image: url('http://androidwallpape.rs/content/02-wallpapers/73-rainynight/wallpaper-1968153.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
	background-size: 100% 100%;
}
h1{
color:white;
test-align:center;
}
p {
color:white;
test-align:right;

}
img {
   
    float: center;
   
}
#menu {
 
    width: 550px;
    height: 45px;
	float:right;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #336666 ;
    background-color: #505050  ;
        border-radius: 10px;
}
#menu ul {
    height: auto;
    padding: 15px 3px;
    margin: 0px;
}
#menu li { 
display: inline; 
padding: 20px; 
}
#menu a {
    text-decoration: none;
    color:white;
    padding: 3px 3px 3px 3px;
}
#menu a:hover {
    color: black;
    background-color: #FFF;
}

</style>

<body>

<div id="menu">
<ul>
<li><a href="sajt.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<h1>JJc</h1>
<p>nesjxjxjjx</p>
<img src="me.jpg">
</body>
</html>

Upvotes: 0

Views: 827

Answers (1)

Hexana
Hexana

Reputation: 1135

The padding is the space surrounding the content.

Boxe Model Example

Upvotes: 1

Related Questions