简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Strange margin-top problem_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:14:16
Original
926 people have browsed it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><div style="height:419px;width:192px;background:url(images/1263871225.jpg)">  <div style="margin-top:100px">    </div></div></body></html>
Copy after login

This code appears under Firefox or IE8 (I haven’t tried other browsers), and the margin-top of the inner div stretches the outer layer.
Please tell me what is the reason for this?
Attach pictures


Reply to the discussion (solution)

Use relative positioning

ie, firefox
defined, body The body sizes are different.
You need to first
body{
margin:0;
padding:0;
}

The outer layer will overlap without setting a border.

The outer layer overlaps without setting a border.
Keyword: Margins are invalid when layers are nested.

Use pading-top

Set overflow:hidden; in the parent element to solve the problem. If you have any questions, send them to the email address on the site and we will help you solve them tomorrow

Thank you, d945332077, brother, I found that float:left can also be used. This problem has troubled me for a long time. I have been working on the front end for a long time, and I think I am quite familiar with it. However, this problem makes me completely doubt whether I know div css, haha

Related labels：
奇怪的margin-top问题
source：php.cn
Previous article：How to set background image using html? _html/css_WEB-ITnose Next article：What does this mean_html/css_WEB-ITnose
Statement of this Website
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
Latest Articles by Author
Latest Issues
Parent's padding ignored by sticky positioned child How to prevent sticky elements from going behind the header? The current code snippet uses...
From 2024-04-06 11:42:51
0
1
338
Nuxt 3 won't render in SSR So I've run into a problem where I'm trying to get my private environment variables. I kno...
From 2024-04-05 15:04:40
0
1
3642
Why does a grid child with a fixed width and a max width of 90% overflow the grid track? Question: My question is very simple, I want to know why the .header element overflows its...
From 2024-04-05 14:33:39
0
1
1426
How to remove the space below each line on the Tic-Tac-Toe board in Next.js using CSS? Why is there a space below each line? (CSS) I'm trying to make a Next.js tic-tac-toe app t...
From 2024-04-05 11:39:02
0
1
1431
Table with fixed header and rotated column headers I have a table with a fixed header and a fixed first column. I also want to rotate the col...
From 2024-04-03 08:50:32
0
1
362
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！