css中如何设置两个图片之间的距离 图片之间的间距,如何用CSS样式
css\u4e8c\u4e2a\u56fe\u7247\u7684\u4e4b\u95f4\u8ddd\u79bb\u592a\u8fd1\u4e86\u7528\u4ec0\u4e48\u4ee3\u7801\u7528css\u5b9a\u4e49\u8fb9\u8ddd, margin:15px 15px 15px 15px;\u6216\u8005padding:15px 15px 15px 15px; \u8fd94\u4e2a\u6570\u503c\u5206\u522b\u8868\u793a\u4e0a\u53f3\u4e0b\u5de64\u4e2a\u65b9\u5411\u7684\u8fb9\u8ddd,\u6ce8\u610f\u987a\u5e8f
margin\u662f\u5916\u8fb9\u8ddd, padding\u662f\u5185\u8fb9\u8ddd,\u533a\u522b\u81ea\u5df1\u4f53\u4f1a\u4e00\u4e0b\u5427
\u56fe\u7247\u4e4b\u95f4\u7684\u95f4\u8ddd\u4e0d\u7528CSS\u4e5f\u53ef\u4ee5\u641e\u5b9a:
vspace: \u7ad6\u76f4\u65b9\u5411\u7a7a\u51fa\u7684\u8c61\u7d20\u6570
hspace: \u6c34\u5e73\u65b9\u5411\u7a7a\u51fa\u7684\u8c61\u7d20\u6570
1、css设置图片距离可以用盒子模型的margin属性。操作方法首先用html编辑器新建一个html文件，里面放入几张图片：
2、然后在上方的style中设置css的样式，设置img的margin属性为“0 30px”即可，其中前一个数字表示上下的距离，后一个数字表示左右的距离。最后在调整统一一下图片的大小，方便观察效果：
3、最后打开浏览器，就会看到2张图片之间是有距离的效果了：
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。所以两个图片之间的距离可以用外边距（margin）来实现：
margin: top right bottom left;
示例：假设页面中放置了2行共6张图片
<img src="1.png" alt="example"><img src="1.png" alt="example"><img src="1.png" alt="example"><br>
<img src="1.png" alt="example"><img src="1.png" alt="example"><img src="1.png" alt="example">
如果通过css设置图片边距为零，则效果如下
img{margin:0;}如果通过css设置图片各个方向的距离相等为10px，则效果如下
img{margin:10px;}如果通过css设置图片不等距离：上下20px，左右10px，则效果如下
img{margin:20px 10px;}
可以通过内边距和外边距来设置
分别是padding和margin
css中padding和margin的区别
margin 外边距
border 边框
padding 内边距
也就是说 设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面
有许多办法，图片可以放在div也可以放在table也可以放在ul、ol，可以用margin也可以用padding调节距离，也可以用clear:both清除两边，想学更多，你找我啊，我只要会的就告诉你。
img{padding:5px;}
绛旓細body{background:url() center top;} .bg{background:url() center bottom;} 杩欓噷鏀句綘椤甸潰鐨勫唴瀹
绛旓細鏈鑷敱瀹氫綅鐨勮帿杩囦簬position:relative; position:absolute; 浜 .big_bg { position:relative; width:500px; height:300px; margin:0 auto; background:url(bg.jpg);} .small_img1 { position:absolute; top:10px; left:10px;} .small_img2 { position:absolute; top:50px; left:50px;} ...
绛旓細3銆佸湪涓や釜div鍐呭垎鍒姞涓婁竴涓浘鐗囨爣绛緄mg锛屽苟涓斿啓涓婁袱涓浘鐗囩殑璺緞銆4銆佷娇鐢css瀵逛袱涓猟iv鐨勬牱寮忚繘琛屽畾涔夛紝(鐩稿叧璇剧▼鎺ㄨ崘锛歝ss瑙嗛鏁欑▼)鍒嗗埆璁剧疆鍏秔osition灞炴т负absolute锛屽嵆涓ゅ紶鍥剧墖鍦ㄩ〉闈㈢殑浣嶇疆鏄粷瀵瑰畾浣嶃5銆佷娇鐢▃-index璁剧疆涓ゅ紶鍥剧墖鐨鍙犲姞鐨勯『搴忥紝璁剧疆1.jpg鍦ㄤ笅闈紝2.jpg鍦ㄤ笂闈6銆侀氳繃left鍜宼op...
绛旓細.img1{ position:absolute; left:0; top:0} .img2{ position:absolute; left:50%; top:0, margin-left:鍥剧墖瀹/2} 鎴 {margin:0 auto;} .img3{ position:absolute; right:0; top:0}
绛旓細杩欎釜瑕佺湅浣犳庨杭鏀 濡傛灉鐩存帴鏀惧湪涓や釜div閲岄潰锛屽畠浠氨鏄乏瀵归綈鐨勫晩,div鏄潡绾у厓绱,娌℃湁娴姩,灏变細鍗犵敤鍗曠嫭涓琛 濡傛灉涓嶇敤div,灏璁剧疆CSS鏍峰紡锛宨mg{display:block}
绛旓細榛樿photoshop鍒囧嚭鏉ョ殑锛屽氨鏄〃鏍煎竷灞銆傛兂杞崲鎴css+div鐨勶紝涓鑸渶瑕佽嚜宸遍噸鏂板埗浣溿備笉杩囨湁涓や釜杞欢锛氫竴涓槸photoshop鐨勬彃浠讹紝鍙互瀹炵幇鍒囧浘鍚庡鍑虹殑椤甸潰css甯冨眬銆傝繖涓彃浠舵病鏈夋眽鍖栫増锛屽鏋滀笉鎳俢ss锛屼篃涓嶅鏄撴搷浣溿傚浗澶栬繕鏈変竴涓槸鑷姩杞崲琛ㄦ牸涓篸iv鐨勮蒋浠躲備綘鍙互鎵炬壘銆備絾鏄痗ss鍏跺疄闈炲父绠鍗曪紝鑷繁鍒朵綔涓鐐逛篃涓...
绛旓細鎮ㄥ彲浠ヤ娇鐢CSS鏉ュ彇娑圚TML椤甸潰涓浘鐗囦箣闂寸殑闂撮殭銆傛湁鍑犵鏂规硶鍙互鍋氬埌杩欎竴鐐癸紝鍏朵腑涓绉嶆槸浣跨敤margin-left鎴杕argin-right灞炴ф潵璋冩暣鍥剧墖涔嬮棿鐨勯棿璺濓紝杩涓や釜灞炴у垎鍒彲浠璁剧疆鍏冪礌鐨勫乏鍙冲杈硅窛锛屽彧闇瑕佺粰鍥剧墖鍏冪礌img娣诲姞鈥渕argin-left:鍊硷紱鈥濇垨鈥渕argin-right:鍊硷紱鈥濇牱寮忓嵆鍙傚彟澶栵紝鎮ㄨ繕鍙互浣跨敤display:block;鎴...
绛旓細鎮ㄥソ锛屾偍鍙互鐢ㄤ竴涓猟iv鍏冪礌鍖呰９涓や釜鍥剧墖鍏冪礌 鐒跺悗浣跨敤CSS涓殑瀹氫綅鏉ョЩ鍔ㄣ傝闂湁DOM鏂囨。鍜孋SS浠ｇ爜鍚?
绛旓細浣犲彲浠ョ粰楂樺害姣旇緝灏忕殑img灞炴э細padding-top锛屼娇涓や釜鍥剧墖搴曢儴瀵归綈
绛旓細鎴戠殑鏂规硶鏄竴涓ぇ鐨刣iv锛屽氨鏄綘瑕佺殑閭ｄ釜div锛岀劧鍚庨噷闈㈠啀宓屽涓涓猟iv锛屾斁缃涓ゅ紶鍥剧墖锛岀劧鍚庣敤text-align:center;鍋氬眳涓傝灞呬腑鐨勫浘鐗囧氨涓嶇敤绠′簡锛岃繖鏍峰氨鍙互浜嗐傜劧鍚庤绱ф尐鐨勯偅涓浘鐗囧姞position:absolute:浣嗘槸涓嶈璁剧疆top璺焞eft璁瀹冭嚜閫傚簲銆傝繖涓槸鎴戣涓烘渶浣崇殑瑙ｅ喅鏂规硶锛佷俊涓嶄俊浣犺嚜宸辫瘯璇曞氨鐭ラ亾浜嗐
