布局中多个连接或图片的间距控制

程序员文章站 2022-06-09 17:09:35

...

1.在网页设计中，经常在一个布局中连接的放多个a标签或img标签，有时候经常碰到之间有一点小空格。这个空格可以通过不换行的方式可以避免，但是我们喜欢写完一个a标签或img标签习惯性的换行。每一个人都有自己的习惯，要尊重每一个人的习惯。所以要找可以符合习惯的写代码方式。

<html>
	  <head>
	  		<title>body的字体颜色</title>
			<style>
				  BODY
						{
							COLOR: #555555;
							FONT-FAMILY: Verdana;
							FONT-SIZE: large;
							background-color: #f4f4f4;  
							margin-left: 0px;
							margin-top: 0px
						}
			</style>
	  </head>
	  <body>			
				 <!---不符合习惯-->
				 <div style="background-color:grey;">
			 	 <a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a> 
				 </div>
				 <!---符合习惯，但是多个a标签之间有一个小空格-->
				  <div style="background-color:grey;">
			 	 <a href="">1</a>
				 <a href="">2</a>
				 <a href="">3</a>
				 <a href="">4</a> </div>
				 <!---符合习惯，也避免了多a标签之间的小空格。-->
				<div style="positon:relative;float:left;height:auto">
				 <div style="background-color:red; height:auto;float:left;" ><a href="">1</a></div>
				 <div style="background-color:green; height:auto;float:left;"><a href="">2</a></div>
				  <div style="background-color:green; height:auto;float:left;"><a href="">3</a></div>
				   <div style="background-color:green; height:auto;float:left;"><a href="">4</a></div>
				</div>
					<br>
				<hr>
				<br>
				 <!---不符合习惯-->
				 <div style="background-color:grey;">
				 <img src="" alt="1"><img src="" alt="1"><img src="" alt="1"><img src="" alt="1"> 
				 </div>
				 
				
				   <!---符合习惯，但是多个图片之间有一个小空格-->
				  <div style="background-color:grey;">
				 <img src="" alt="1">
				 <img src="" alt="1">
				 <img src="" alt="1">
				 <img src="" alt="1"> 
				 </div>
				  <!---符合习惯，也避免了多个图片之间的小空格。-->
				  <div style="positon:relative;float:left;height:auto">
				 <div style="background-color:red; height:auto;float:left;" ><img  border="0" src="" alt="1"></div>
				 <div style="background-color:green; height:auto;float:left;"><img  border="0" src="" alt="2"></div>
				  <div style="background-color:green; height:auto;float:left;"><img  border="0" src="" alt="3"></div>
				   <div style="background-color:green; height:auto;float:left;"><img border="0" src="" alt="4"></div>
				</div>
				
			 
			
			
			 
	  </body>

</html>