A question about negative values of margins in "A Nutrition label-Step 37"

HTML-CSS
1

HTML:

<div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>

CSS:

.calories-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-weight: 700;
}

Phonomeon:

Having margin: -7px -2px; for the span:

Preview-1-span
Preview-1-span1307×175 21.9 KB

Without margin: -7px -2px; for the span:

Preview-2-span
Preview-2-span1264×167 23.3 KB

Having margin: -5px -2px; for the p:

Preview-3-p
Preview-3-p1211×206 22.4 KB

Without margin: -5px -2px; for the p:

Preview-4-p
Preview-4-p1317×318 25.1 KB

The content of the p moves as I expected,which is translated to the top-left,but the one of span moves completely differently.

Question:

Why the movements of the span is different from the the p,while they all have nagetive-value margins .

Why negative values of margins push the span to the bottom-right instead of top-left?

Reason why I ask this Question:

I have checked the presentations when margins values are negative. Here it is:

  • When margin-left is set to a negative value, the element itself shifts to the left, and subsequent elements also shift to the left.
  • When margin-right is set to a negative value, the element itself is not affected, but the elements to the right shift to the left.
  • When margin-top is set to a negative value, the element itself shifts upward, and the elements below it also shift upward.
  • When margin-bottom is set to a negative value, the element itself is not affected, but the elements below it shift upward.

My thought:

The setting margin: -7px -2px; should make the content within the span element shift to the top-left,7px in Y axis and 2px in X axis.

Reason of my thought:

As the rules say above,
There are no elements below the span or beside the span on the right,
So,the margin-bottom:-7px and margin-right:-2px will not work.
Then,it comes to the margin-left:-2px and the margin-top:-7px.
Since there are also no elements after or below the span,
I think there are only movements of itself without any influence of other siblings,
Which translate it to top-left,7px in Y axis and 2px in X axis.

Is there any chance that it is because of the span itself which is an inline element or the flex layout model?

Pre-thanks for your reply and correcting!!!
If I do not express my idea clearly,Please tell me in the comment area!

Course Source: A Nutrition label-Step 37

2

a span is an inline element, a p is a block element so their behaviour is different

also when margin has two value, the value is still applied to all four directions, the first one top-bottom the second one left-right

also .calories-info is a flex container, that changes some behaviour of the elements inside, while .left-container doesn’t look like it is, at least you have not shared it

if you are asking how you get to the right values… trial and error

1 Like
3

Actually I just want to how to predict and understand their movements :smiley:

4

try in a situation without flex, see the difference between block and inline elements

then if you really want to, add flex

1 Like
5

Thanks for your advice!