2015-10-22 111 views
0

我正在学习CSS,并且我对导航栏中的填充有点困惑。填充导航栏,李和标签

#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; 
} 

我怎么看到UL填充相对移动的边界所有UI元素,但读音字困惑什么真的做填充李和标签? 因为我如何理解填充是一个href标签之间的空间,但是在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; 
 
\t background-size: 100% 100%; 
 
} 
 
h1{ 
 
color:white; 
 
test-align:center; 
 
} 
 
p { 
 
color:white; 
 
test-align:right; 
 

 
} 
 
img { 
 
    
 
    float: center; 
 
    
 
} 
 
#menu { 
 
    
 
    width: 550px; 
 
    height: 45px; 
 
\t 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>

+0

请发表你的HTML太 – Chris

+0

'padding'是一个元素,它的边框之间的差距。每个元素可以有一个“填充”。 – KittMedia

+0

使用浏览器的inspector dev工具(firefox中的Cntl-Shift-C)并选择你正在查看的元素,然后在右边的框模型中查看它的功能。 – KimvdLinde

回答

1

的衬垫周围是该内容的空间。

Boxe Model Example