如何解决当我给附近的段落边距时为什么图像会移动?
如果我在“ .name”上添加边距,那么为什么图像会移动。我给所有元素加边框(“供参考”)。为什么会这样?
body{
margin: 0;
padding: 0;
font-family: 'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
font-size: 3.5vh;
background-color: #000;
}
.percy-image{
border: 2px solid red;
height: 60vh;
margin-left: 50vw;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.info{
display: inline-block;
border: 2px solid yellow;
color: white;
margin-top: 1vh;
}
.name{
border: 2px solid white;
margin-top: 20vh;
display: inline-block;
}
.role{
font-size: 1.8vh;
display: inline-block;
border: 2px solid white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="fusion.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Fusion</title>
</head>
<body>
<div class="wrapper">
<div class="info">
<p class="name">I'M PERCY JACKSON</p>
<p class="role">WEB DEVELOPER</p>
<img src="man.jpg" alt="" class="percy-image">
</div>
</div>
</body>
</html>
This is the Image when Margin applied!
This is the Image when Margin no applied
因为什么都没有打断图像(没有div,没有文本,没有元素)。
那为什么要移动?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。