Difference between margin and padding?

后端 未结 22 1961
广开言路
广开言路 2020-11-22 12:58

What exactly is the difference between margin and padding in CSS? It really doesn\'t seem to serve much purpose. Could you give me an examp

22条回答
  •  逝去的感伤
    2020-11-22 13:29

    My understanding of margin and padding comes from google's developer tool in the image attached

    In Simple words, a margin is the space around an element and padding means the space between an element and the content inside that element. Both these two are used to create gaps but in different ways.

    Using Margin to create gap:

    In creating gap margin pushes the adjacent elements away

    Using Padding to create gap:

    Using padding to create gap either grows the element's size or shrinks the content inside

    Why is it important to know the difference?

    It is important to know the difference so you could know when to use either of them and use them appropriately.

    It is also worthy of note that margins and padding come handy when designing a website's layout, as margin specifies whether an element will move up or down, left or right while padding specifies how an element will look and sit inside its container.

提交回复
热议问题