Default margins on css?

1

I believe it is a very basic knowledge but I’m struggling to understand how it works. I would like to know if there is such thing as default margins when you create divs. I’m doing exercise number 16 about margins and paddings but can’t understand how the blocks starts with a top and bottom margin of 22.178 if theres no margin properties on the code.

Here’s the code

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 10px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>
2

I believe there is no default margins on divs.
I don’t understand your description, really. Where is the 22.178 margin?

In the challenge, the red and blue boxes have 20px of margin applied to them; the yellow box has none, and looking at the layout of the box model on the right side, there is 0 margin.

image
image1463×526 120 KB

1 Like
3

If you remove those 20px in the red and blue boxes they still have some margins on top and bottom.

image
image1171×739 42.7 KB

4

I see what you mean now. Look carefully at the code below. If you right-clicked on the red or blue boxes to inspect them, you did not inspect divs.

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

The red and blue boxes are <h5> elements not divs. Text elements do have default margin. You can try by coding a <p> tag and inspecting that.

1 Like
5

:open_mouth: :open_mouth: :open_mouth: :open_mouth: :open_mouth: :open_mouth:

I see now

I got it. Thank you so much for this :smiley:

6

You’re welcome.
One thing you can do to remove all deafult margins (browser dependent), you can code a basic reset:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

’*’ is a universal selector that affects all elements. This will override any default margins to zero pixels. It is useful because you have control over the margins, rather than the browser adding its own default values.