Using Padding instead of Margins to space Siblings

Question

The pink block li elements in my code are spaced out because I used margins, but I've that it better to use padding in this case, except every time I try to replace the margin properties with padding, I cannot separate the pink blocks from each other. How do I use padding instead of margins to space out the li elements?

I tried googling stuff about this, but all that comes up are more practical applications of CSS like styling a website and spacing text, and I can't figure out how it applies to my work.

This is what it should look like (which I made using margin properties)

    .blue-container {
      background-color: #141f40;
      height: 100px;
      width: 400px;
      position: relative;
    }
    .white-container {
      background-color: #fff;
      height: 60px;
      width: 160px;
      position: absolute;
      top: 20px;
      left:220px;
    }
    .white-container > li{
      background-color: #a9004b;
      height: 40px;
      width: 40px;
      float: left;
      margin-top: 10px;
      margin-left: 10px;
    }

    <!DOCtype HTML>
        <html lang="jp">
        <head>
          <title>Siblings</title>
          <link rel="stylesheet" type="text/css" href="style.css">
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
        </head>
        <body>
          <main>
            <div class="blue-container">
              <ul class="white-container">
                <li>1</li>
                <li>2</li>
                <li>3</li>
              </ul>
            </div>
          </main>
        </body>
        </html>

Possible duplicate of [When to use margin vs padding in CSS](https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css) — chharvey, Feb 16 '18 at 00:54
I kind of just threw in the second question last minute without searching the site for it. I shouldn't have done that. I deleted that question. But even after reading that answer I still could not figure out how to make the li elements space out, the parent would just get bigger in size when I applied padding. — Farshad, Feb 16 '18 at 01:02

score 0 · Answer 1 · answered Feb 16 '18 at 00:51

The first thing you need to understand is the relationship between margin and padding. Margins are used to 'offset' an element from its parent. Padding, conversely, is used to denote how much space there should be between the edge of an element and its children.

This is demonstrated in the box model:

According to your desired image, your first step would be to ensure that the .white-container is actually contained within the .blue-container. This can be done by simply adjusting the top and left. From here it's just a matter of applying the padding to the parent (.white-container).

You'll probably also want to hide the bullet points in the <li> elements, which can be done with list-style: none, as seen in the following:

.blue-container {
  background-color: #141f40;
  height: 100px;
  width: 400px;
  position: relative;
}

.white-container {
  background-color: #fff;
  height: 60px;
  width: 160px;
  position: absolute;
  top: 0px;
  left: 220px;
  padding: 5px;
}

.white-container>li {
  background-color: #a9004b;
  height: 40px;
  width: 40px;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  list-style: none;
}

<!DOCtype HTML>
<html lang="jp">

<head>
  <title>Siblings</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
</head>

<body>
  <main>
    <div class="blue-container">
      <ul class="white-container">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </main>
</body>

</html>

Johannes · Answer 2 · 2018-02-16T12:19:58.883

0

margins create/define a distance to the neighboring elements, outside of the border of the element. Therefore they won't be filled by the background image or background color, since that is always restricted to the area within the border.

paddings are inside the border and create some space/distance between the border and the element's contents (so for example text content doesn't touch the borders, but keeps some distance to the borders). Since they are inside the border, they are filled by the background image or background color.

In your case, you clearly need margins therefore.

edited Feb 16 '18 at 12:19

answered Feb 16 '18 at 01:05

Johannes

53,485
15
52
104

Right, that's what I thought! But I was told to recreate this with padding instead. And apparently it is possible...? – Farshad Feb 16 '18 at 01:17
The only possible way to do that with padding would be to apply padding to the white container and distribute the three purple squares over the whole width by using `display: flex` and `justify-contents: space-between` on the white container. But the space between the three purple squares wouldn't really be padding in that case, so doing it strictly with padding is actually impossible. – Johannes Feb 16 '18 at 01:27

Using Padding instead of Margins to space Siblings

2 Answers2