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, 2022 in CSS by Edureka
• 13,620 points
888 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
0 answers

How do I center a list of text and then justify it in a w3.css column?

I am unable to center the contact ...READ MORE

Aug 17, 2022 in CSS by Edureka
• 13,620 points
685 views
0 votes
1 answer

How do I center this form in css?

You can try form { ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
682 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, 2022 in CSS by Edureka
• 12,690 points
798 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, 2022 in CSS by Edureka
• 12,690 points
731 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, 2022 in CSS by Edureka
• 13,620 points
517 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, 2022 in CSS by Edureka
• 12,690 points
401 views
0 votes
0 answers

What does auto do in margin: 0 auto?

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

Jul 11, 2022 in CSS by Edureka
• 13,620 points
328 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
10,506 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP