Margin-top does not push div down

Asked

Viewed 234 times

0

I am trying to apply a margin on a div and in no way works.

I have my HTML:

<div class="side-menu-user-infos">
    <div class="side-menu-user-photo">
        <img src="http://pluspng.com/img-png/user-png-icon-male-user-icon-512.png">
    </div>
</div>

And my CSS:

.side-menu-user-infos {
  background: #FFF;
  display: block;
  height: 190px;
  border-bottom: 1px solid rgb(155, 158, 162);
  position: relative;
  margin: 0 auto;
}

.side-menu-user-photo {  
  border-radius: 50%;
  width: 40%;
  height: 100px;
  margin: 0 auto;
  position: relative;
  box-shadow: 1px 1px 10px;
}

img {
  width: 100%;
  height: 100%;
}

The result of this is:

inserir a descrição da imagem aqui

How I wanted you to stay:

inserir a descrição da imagem aqui

No kind of margin works where I’m wrong?

html css

2 answers

2


Can change the margin: 0 auto; for margin: 30px auto 0 auto;. When the margin has only 2 values, the first is the top and bottom and the second of right and left.

Making the exchange for margin: 30px auto 0 auto;, note that now the margin has 4 values:

            right  left
              ↓      ↓
margin: 30px auto 0 auto;
         ↑        ↑
        top    bottom

Then you adjust the 30px (that would be the margin top) for the amount you want.

It could also be only with 3 values:

         right/left
              ↓      ↓
margin: 30px auto 0;
         ↑        ↑
        top    bottom

When it has 3 values, the first one is the top, the second of right and left and the third of bottom.

But you could also, let margin: 0 auto; and after (only after) placing margin-top: 30px, because the margin-top will override the value of the top of margin: 0 auto;:

.side-menu-user-photo {  
  border-radius: 50%;
  width: 40%;
  height: 100px;
  margin: 0 auto;
  margin-top: 30px;
  position: relative;
  box-shadow: 1px 1px 10px;
}

See example:

.side-menu-user-infos {
  background: #FFF;
  display: block;
  height: 190px;
  border-bottom: 1px solid rgb(155, 158, 162);
  position: relative;
  margin: 0 auto;
}

.side-menu-user-photo {  
  border-radius: 50%;
  width: 40%;
  height: 100px;
  margin: 30px auto 0 auto;
  position: relative;
  box-shadow: 1px 1px 10px;
}

img {
  width: 100%;
  height: 100%;
}
<div class="side-menu-user-infos">
    <div class="side-menu-user-photo">
        <img src="http://pluspng.com/img-png/user-png-icon-male-user-icon-512.png">
    </div>
</div>

  • 1

    Thanks, Sam Already helped me more than once :), thanks! I need to read a little more about the use of the values that can be assigned in tags!

  • Tmj friend! ;)))

1

Try changing the margin to padding.

.side-menu-user-infos {
  background: #FFF;
  display: block;
  height: 190px;
  border-bottom: 1px solid rgb(155, 158, 162);
  position: relative;
  **padding: 15px auto;**
}

.side-menu-user-photo {  
  border-radius: 50%;
  width: 40%;
  height: 100px;
   **padding: 15px auto;**
  position: relative;
  box-shadow: 1px 1px 10px;
}

img {
  width: 100%;
  height: 100%;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.