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

子元素增加margin-top会增加给父元素的问题_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:29:33
Original
1480 people have browsed it

假设我们有如下代码

　　


　　　　

　　

会发现效果如下所示

子元素的margin-top并没有使子元素与父元素分开，反倒效果等同于给父元素加了一个margin-top；

解决的方法也有，具体为：

1.修改父元素的高度，增加padding-top样式模拟（padding-top:1px;）

2.为父元素添加overflow:hidden;

3.为父元素或者子元素生命元素浮动(float:left;可用但是不推荐)

4.为父元素添加border(border:1px solid transparent)

5.为父元素或者子元素声明绝对定位

6.给父元素增加内容生成#father:before{content:' ';display:table};

Related labels：
子元素增加margin-top会增加给父元素的问题
source：php.cn
Previous article：<!DOCTYPE html> <html> <head> <meta charset=_html/css_WEB-ITnose Next article：CSS3实例: 实现 swap 动画_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
Why does transitioning from width: 100% cause the transition to jump? I made a JSFiddle to reproduce this issue. I'm trying to make a grid element grow on hover...
From 2023-09-13 14:24:30
0
2
238
ReactJS - Custom hook return function does not store actual data of internal state I have a custom hook useNotifications for notification widgets. This hook returns an array...
From 2023-09-12 08:49:22
0
1
179
Rerunning useEffect: Guidelines after submitting a function Hello everyone! In my project I execute a function in useeffect that gets data, but when I...
From 2023-09-10 11:06:03
0
2
308
How to set the width of a sublist of flex:auto elements Hello, I have a CSS problem. There are two columns, the right (B) column has a fixed width...
From 2023-09-09 18:09:18
0
2
242
How to overlay an image with text with rounded background I need to replicate in HTML what you see in this image: The problem is that the text is co...
From 2023-08-30 15:20:14
0
1
192
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！