整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 196px;
height: 150px;
border: 1px solid red;
}
p{
width: 196px;
height: 40px;
background-color: red;
}
img{
/* 方法① */
/* vertical-align: bottom(top|middle) */
/* 方法② */
/* display: block; */
}
</style>
</head>
<body>
<div>
<img src="img/img1.png"/>
<p>這是一段文字</p>
</div>
</body>
</html>片與文字之間存在間隙(空白), 解決方法有兩個
vertical-align: bottom(top|middle); 任意一個屬性
display:block; 將圖片轉換為塊元素
vertical-align：指定元素的垂直對齊方式
top 把元素的頂端與行中最高元素的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網站頁面</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
body {
background-color: #FFFFFF;
text-align: center;
font-family: "宋體";
font-size: 12px;
color: #575757;
}
#banner {
height: 210px;
width: 982px;
margin: 0 auto;
}
#menu {
height: 87px;
width: 982px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<div id="banner"><img src="images/203.jpg" width="982" height="210" alt="banner" /></div>
<div id="menu"><img src="images/204.jpg" width="223" height="80" alt="gamestart" />
<img src="images/205.jpg" width="106" height="80" alt="menu1" />
<img src="images/206.jpg" width="102" height="80" alt="menu2" />
<img src="images/207.jpg" width="105" height="80" alt="menu3" />
<img src="images/208.jpg" width="100" height="80" alt="menu4" />
<img src="images/209.jpg" width="77" height="80" alt="menu5" />
<img src="images/210.jpg" width="86" height="80" alt="menu6" />
<img src="images/211.jpg" width="77" height="80" alt="menu7" />
<img src="images/212.jpg" width="106" height="80" alt="menu8" /></div>
</div>
</body>
</html>
根據我們的案例，邊框、邊界、邊距都設置成0了，圖片與圖片之間還是有空隙，這是為什么呢？
記得之前解決的方法是，img標簽符之間不要有空格或者回車。
就是寫成這樣的
還有些其他的方法，可以讓其在水平方向上不留下空隙，也就是左右的空隙，比如
#menu { font-size:0;} //意思是父級元素的字體大小為0，img默認是根據父元素的baseline進行對齊的，把父元素的字體大小設置為0，就沒有空隙了，作為子元素的img對齊相應的也就沒有空隙了
#menu {letter-spacing:-600px}
家好，我是兼職小哥，我過去做過很多個企業網站，尤其醫美網站做的比較多，大約1000多個。如果您缺少好的網站樣式呢，不妨給我留言啊。
下面咱們書歸正傳，我曾經在一家民營醫院做過網絡總監，美工是以前的院長招聘來的，技術實在不敢恭維，切出來的圖片，做成網頁經常會有白色的間隙。這是怎么回事呢？這種醫美專題經常因為這個原因返工。設計一個專題要好幾天，切圖還要切一天。
我們通常使用最新版本的fireworks切圖，這樣運行速度快，效率高，切圖這后，可以直接導出生成網頁和css樣式
css中有這樣一句關鍵代碼，可以避免樣式的原因圖片出現間隙。
<style> img{ border:none; display:block; }
</style>
下面給大家演示如何做切片圖片不會有重疊會白色間隔，前先用左邊的切片工具切出兩個矩形區域。
選中剛才做的兩個切片，在對齊面板中輸入間距為1，再點水平間距按鈕。
這樣一下就把圖片切片對齊的十分好看了，有幾十個圖片的時候也這樣處理，您就不用反復拖拽鼠標加上用計算器計算位置和坐標了，切片位置會非常工整。
這個技巧將為美工切圖的過程節省大量的時間，美工可以出去先喝杯茶了。
說明：我用的配圖不代表會計這個專業真是的一生無憂，這個是一飽和和專業。在我們這種三線城市，會計的工資才1000多，還沒有保險。
美工的工作也是非常非常累，市場也是飽和的，永遠會有源源不斷的新的畢業生被招到到單位里面來，美工的可替代性非常大。最好的辦法就是把做網站外包出去做。
記住我是您工作中的好幫手，如果這篇文章對您有用，請關注我吧！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
