发表新帖
发表新帖

Difference between margin and padding?

后端 未结
关注
22 1938
广开言路
广开言路 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:08

    Margin is applied to the outside of your element hence affecting how far your element is away from other elements.


    Padding is applied to the inside of your element hence affecting how far your element's content is away from the border.

    Also, using margin will not affect your element's dimensions whereas padding will make your elements dimensions (set height + padding) so for example if you have a 100x100px div with a 5px padding, your div will actually be 105x105px

    0 讨论(0)
  • 孤独总比滥情好
    2020-11-22 13:09

    Padding allows the developer to maintain space between the text and it's enclosing element. Margin is the space that the element maintains with another element of the parent DOM.

    See example:

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>
    0 讨论(0)
  • 孤街浪徒
    2020-11-22 13:14

    padding is the space between the content and the border, whereas margin is the space outside the border. Here's an image I found from a quick Google search, that illustrates this idea.

    enter image description here

    0 讨论(0)
  • 一生所求
    2020-11-22 13:15

    The simplest defenition is ; padding is a space given inside the border of the container element and margin is given outside. For a element which is not a container, padding may not make much sense, but margin defenitly will help to arrange it.

    0 讨论(0)
  • 长情又很酷
    2020-11-22 13:15

    Padding is space inside the border, whereas Margin is space outside the border.

    0 讨论(0)
  • 遥遥无期
    2020-11-22 13:15

    Padding is the space between nearest components on the web page and margin is the space from the margin of the webpage.

    0 讨论(0)
 看不清?
提交回复
热议问题