css 新手问题

roujennie 2020-05-04 04:26:44
想问一下,为什么我的这几行图片距离隔得这么大?我的本意是想把这些图片变成金字塔状,就是两边对称,然后中间不要隔这么多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,p,h2,div{
margin: 0;
padding: 0;
}
div{
width: 1400px;
height: 500px;
margin: 0;
padding: 50px 100px;
}
.first{
margin: 10px 540px;
padding: 10px;
}
.second{
margin: 10px 175px;
}
</style>
</head>
<body>
<div>
<div class="first"><img src="img/1-1.jpg" width="267" height=180" /></div>
<h2></h2>
<div class="second">
<img src="img/2-1.jpg" width="267" height=180" />
<img src="img/2-2.jpg" width="267" height=180" />
<img src="img/2-3.jpg" width="267" height=180" />
</div>
<h2></h2>
<img src="img/3-1.jpg" width="267" height=180" />
<img src="img/3-2.jpg" width="267" height=180" />
<img src="img/3-3.jpg" width="267" height=180" />
<img src="img/3-4.jpg" width="267" height=180" />
<img src="img/3-5.jpg" width="267" height=180" />
</div>
</body>
...全文
118 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
kmokd 2020-05-04
  • 打赏
  • 举报
回复
你的第二个问题是:就是两边对称,然后中间不要隔这么多。
答:
1.使用<center></center>
2.因为浏览器把两个img标签之间的空格当成了空白节点。则多个img标签写在一行即可!!
kmokd 2020-05-04
  • 打赏
  • 举报
回复
你的问题是:为什么我的这几行图片距离隔得这么大?
回答:
1.因为你的
div{
width: 1400px;
height: 500px;
margin: 0;
padding: 50px 100px;
}
中设置了 height: 500px;及 padding:50px 100px;
删除。
2.删除 二对 <h2></h2>
3.设置 .three{
horizon_zpy 2020-05-04
  • 打赏
  • 举报
回复
<h2></h2>

把这对标签删了试试,是不是他们占了空行
roujennie 2020-05-04
  • 打赏
  • 举报
回复

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧