0

I have problem in CSS. I want to design a login page like picture below.

enter image description here

I used padding-top for create space between picture and top border of the page. But when I do this, the border-radius of picture is not working for all corners! It is not working for border top right and left! I do not know why this happen!

HTML

<img src="img/avatar-01.jpg" alt="" class="Image">

CSS

.Image {
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    padding-top: 120px;
}

Here is output with padding: enter image description here

However if I use margin-top it works correctly!!

CSS

.Image {
    border-radius: 50%;
    margin: 125px auto 10px 612px;
}

Here is output with margin: enter image description here

Why this happen? Thanks for your help in advance

Ali
  • 439
  • 1
  • 4
  • 14
  • 2
    Please, provide HTML or create a new fiddle (https://jsfiddle.net) and provide a link to it. – Oybek Odilov Jan 24 '23 at 16:27
  • 1
    [https://stackoverflow.com/questions/5958699/difference-between-margin-and-padding](https://stackoverflow.com/questions/5958699/difference-between-margin-and-padding) – Sfili_81 Jan 24 '23 at 16:29
  • @Sfili_81 My question is not about differences between margin and padding!!! I know the differences!! But I do not know why border-radius not working for 2 corners with padding! – Ali Jan 24 '23 at 16:32
  • padding is working but because of padding top its showing on top give a color or border to element then you can see what exactly is happening. – Nisha Jan 24 '23 at 16:35
  • Use the browser developer tools to inspect the element. There you will see every gap and how its calculated. – flappix Jan 24 '23 at 16:35

1 Answers1

1

It works as it should but because padding is calculated inside the element, it adds to the size of your .Image from the top (since you are adding the padding). That's why you need to use margin-top, margin is rendered outside the element and does not change the actual size of it.

There's also an attribute called box-sizing which could be set to in cases like these to border-box which makes padding to not stretch the element but only if element is smaller than all paddings combined.

You can read more about it in the documentation.

SnoopFrog
  • 684
  • 1
  • 10