Have a question? _html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Have a question? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:10 PM

margin-top和top到底什么区别！！！！！

<style>.div1{border:1px red solid;width:200px;height:100px;position:absolute;color:#FFFFFF;background:#33CCFF;}.div2{border:1px red solid;width:200px;height:100px;position:relative;background:#000000;color:#FFFFFF;margin-top:100px;    //这里top：100px 的话div2就往下，如果 margin-top:100px;的话 ，为什么div1也会跟着往下}</style><body><div class="div1">div1</div><div class="div2">div2</div></body>

回复讨论(解决方案)

margin-top指页边空白
top 一般用于绝对定位

举例给你看：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

div1

div2

If you run the code here, you will clearly know the difference between the margin value and the top value when there is positioning;
And margin refers to the outside of the element distance, and top is relative to the element; especially when there is positioning ~
In other words: their scope of use is different ~

margin

margin-top refers to the margins of the page
top is generally used for absolute positioning
Correct answer

Someone has solved it!

Let me give you an example:

Still puzzled! Why margin-top: 100 What I was thinking was that div2 should make div3 bigger, that is, move it down 100 relative to div3. Unexpectedly, he also moved div3 down 100

Can anyone tell me? What is relative between margin and top? What is absolute?

For example, div2 is position:relative;
Then its margin-top: 100 is relative.
Then its top: 100 is absolutely What is absolute

Who can tell me what margin is relative to top and what is absolute

For example, div2 is position:relative;
Then his margin-top: 100 is relative What is relative
Then his top: 100 is absolutely what
position: relative is relative positioning. Also, when writing css, it is best to bring the unit px. This is a bad habit.

Saying it means not saying it. I just want to know that div2 is relative, why does it have margin-top: 100px? div3 will also move down instead of moving down relative to div3

.div3{ width:300px; height:300px; background:#999; border:1px solid #666; position:relative;}
Because div3 does not have a border set

Why does this happen without a border set! I’m dizzy

Oh, I understand. Does anyone have a document that explains this relative position and absolute position? I am confused by the style

I still have a question: Does margin-left:100 div3 not move with div2? Why

http://www.hicss.net/use-margin-or-padding/

The poster should learn the basics of css

margin-top refers to the page margin Blank
top is generally used for absolute positioning
This

I still have questions about margin-left:100 div3 will not move with div2? Why
div3 is the parent layer of div2
The left margin of div2 is based on the left margin of the parent layer
So div3 will not move

Quote from the 3rd floor's reply:
Example Here you go:

……
The words here are in Firefox There is a bug in the browser? Firefox’s internal div uses margin-top to become the margin-top of the external div
Solution: add css attributes to the parent layer: display:inline-block; or overflow:hidden;

margin-top: is the distance between the content and the border
top: is the distance between the content and the content

margin-top is for setting the outer margins
top is for positioning
Learn html The div css can be found here http://blog.sina.com.cn/u/2760399482

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles