0

If I add margin to ".name" then why image moves. I've given border to all elements ("for reference"). Why is this happening?

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

Because Nothing is interrupting Image(no divs, no text, no elements).

Then Why its moving?

Here is full code

Here is the Image

isherwood
  • 58,414
  • 16
  • 114
  • 157
Fiction Belt
  • 15
  • 1
  • 8
  • 1
    As a side note, you should probably not be using `inline-block` for any of this. This is a better use case for flex-box. – disinfor Oct 08 '20 at 18:31
  • @disinfor they say they are a beginner, [tag:flexbox] is probably too complex for a new web dev – Aryan Beezadhur Oct 08 '20 at 18:31
  • 1
    @AryanBeezadhur 1. Flex is not too complex. There are tons of tutorials. `grid` might be a little out of their current comfort zone. 2. Using `inline-block` isn't the best approach for this. As a beginner, it's better to learn the "correct" way rather than this approach. – disinfor Oct 08 '20 at 18:33
  • Your .name element comes before your image. It's above it. So of course a margin above .name pushes .name down, and pushes down everything below it. Since the image is below it, it gets pushed down, too. Grid/flexbox is the answer, but requires you to learn a lot. – Kerri Oct 08 '20 at 18:34
  • @disinfor no need to make a structured attack against my comment. I'm trying to make things easier for the OP, I was just saying that this may be possible without flexbox – Aryan Beezadhur Oct 08 '20 at 18:36
  • 2
    Making things easier for the OP would include learning the correct method to approach the problem from the start. Of course OP could do this without flexbox - they could use `floats`, `tables` and try to fix their current approach using `inline-block`, however, we have much better CSS tools at our disposal now. – disinfor Oct 08 '20 at 18:39
  • A side effect of using margin/padding/border on the left or right side of an element is that it may push the layout out the visible view. You can solve the padding/border problem by adding `* { box-sizing: border-box; }` . Try to use padding instead of margin for horizontal whitespace. – bron Oct 08 '20 at 18:46

0 Answers0