How do negative margins in CSS work and why is margin-top -5 margin-bottom 5

0 votes

A common trick for vertical positioning elements is to use the following CSS:

.item {
    position:absolute;
    top:50%;
    margin-top:-8px; /* half of height */
    height: 16px;
}

When seen in the metric view as in Chrome this is what you see:

enter image description here

However, there is no visible margin when you hover over the element; rather, the margin is seen "outside" of the border. However, negative margins are not visible. What distinguishes them from one another in terms of appearance?

Why are margin-top:-8px and margin-bottom:8px different?

So, how exactly do negative margins operate and what is the underlying theory? How do they "bump up" an item when the top margin is less than 0?

Jul 18 in CSS by Edureka
• 9,940 points
15 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

How do I center this form in css?

You can try form { ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
28 views
0 votes
1 answer
0 votes
1 answer

What is WebKit and how is it related to CSS?

In the CSS syntax for rendering content ...READ MORE

answered Jun 17 in CSS by Edureka
• 9,540 points
18 views
0 votes
1 answer

when declaring css styles, what is the meaning of .classA.classB (two class names with a dot in the middle and no space)

The first example (space-separated classes) is a ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
31 views
0 votes
0 answers

How to make a back-to-top button using CSS and HTML only?

I want to scroll down and up ...READ MORE

Jun 30 in CSS by Edureka
• 9,940 points
23 views
0 votes
0 answers

How to include bootstrap css and js in reactjs app?

I want to incorporate bootstrap into my ...READ MORE

Jun 30 in CSS by Edureka
• 9,940 points
28 views
0 votes
1 answer

When to use margin vs padding in CSS ?

MARGIN vs PADDING : Margin is used in an element to ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
11 views
0 votes
0 answers

What does auto do in margin: 0 auto?

What does auto do in margin: 0 ...READ MORE

Jul 11 in CSS by Edureka
• 9,940 points
14 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,754 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP