CODEWITHSUNDEEP
css
Peter
Peter

Reputation: 419

Negative margin can't go more negative

I am playing with various css properties to see how they work. And my question is, why is it when I set "margin-top" that is more negative than -20px my link doesn't move more upwards any more. Setting a more negative value like -21px and above doesn't move the link more to the top at all.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav</title>
    <style>
        nav { /*height: 60px;*/ border: 2px solid black;}
        a {
            display: inline-block;
            text-decoration: none;
            background-color: lightgreen;
            color: grey;
            font-weight: bold;
            padding: 20px;
            border-bottom: 2px solid red;
            margin-top: -20px; /* more negative value doesn't move the link more to the top */
        }
    </style>
</head>
<body>
    <h1>Testing</h1>
    <nav>
        <a href="#">link 1</a>
    </nav>
    <p>some text so we can see how it is affected when setting various properties</p>
</body>
</html>

Upvotes: 2

Views: 2125

Answers (3)

Georgy
Georgy

Reputation: 2462

All the elements in your example have what is called (are in) a "Normal Flow". The very first element in the flow is <h1> which is block element, it occupies the whole available width and makes the line break. When you use negative margin-top you go up to the element above. 20px of padding is the available negative margin for the element. To go out of the "Normal flow" you can use position: absolute. To stay in the flow you may use position: relative, and use top: -21px;.

Upvotes: 2

Asons
Asons

Reputation: 87191

For inline (inline-block) elements it appears they don't go beyond their height (can't say/find why), so if you for example change padding greater that 20px, you can have a negative margin as big.

If you do change the anchor to a block level element though, the negative margin applies properly.

Sample 1 - padding

nav { /*height: 60px;*/ border: 2px solid black;}
a {
  display: inline-block;
  text-decoration: none;
  background-color: lightgreen;
  color: grey;
  font-weight: bold;
  padding: 40px;
  border-bottom: 2px solid red;
  margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
  <a href="#">link 1</a>
</nav>
<p>some text so we can see how it is affected when setting various properties</p>

Sample 2 - block element

nav { /*height: 60px;*/ border: 2px solid black;}
a {
  display: block;
  text-decoration: none;
  background-color: lightgreen;
  color: grey;
  font-weight: bold;
  padding: 20px;
  border-bottom: 2px solid red;
  margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
  <a href="#">link 1</a>
</nav>
<p>some text so we can see how it is affected when setting various properties</p>

Upvotes: 2

Peter Wilson
Peter Wilson

Reputation: 4319

It will never go more negative because there is a h1 tag which dosen't have any spaces above it to do the margin

you have to use position:absolute; to make a tag move freely

Upvotes: 0

Related Questions