子元素设置margin会影响父元素问题

妖狐艹你老母 2023-07-01 11:57 124阅读 0赞

参考:

https://blog.csdn.net/man\_tutu/article/details/62224844

给子元素设置的margin结果作用在父元素身上,类似于“越级伪命令”
问题的解决办法有三种

  1. 1、为父元素设置padding
  2. 2、为父元素设置border
  3. 3、为父元素设置 overflow: hidden

注意

如果子元素不是div,p,h1等块级标签,而是a,span等行内标签的话,则不会出现margin击穿问题。此外,如果父元素和子元素之间还有别的内容,即html代码如下所示的话也不会导致margin击穿问题。
例如(react中)

  1. 这样子元素设置margin会设置给父元素

    import React from ‘react’;
    import ‘../Css/App.css’;
    //引入组件
    import Header from ‘../Component/Header/Header.js’;
    import BodyContent from ‘../Component/Body/Body.js’;
    function App() {
    return (

    1. <div className="App">
    2. { /* 头组件挂载 */}
    3. <Header></Header>
    4. <BodyContent></BodyContent>
    5. </div>

    );
    }
    export default App;

习惯给父元素加透明边框后解决

  1. .App{
  2. border-top: 1px solid transparent;
  3. }

在这里插入图片描述

  1. 父元素和子元素之间有内容

    import React from ‘react’;
    import ‘../Css/App.css’;
    //引入组件
    import Header from ‘../Component/Header/Header.js’;
    import BodyContent from ‘../Component/Body/Body.js’;
    function App() {
    return (

    1. <div className="App">
    2. { /* 头组件挂载 */}
    3. <Header></Header>
    4. React
    5. <BodyContent></BodyContent>
    6. </div>

    );
    }
    export default App;

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,124人围观)

还没有评论,来说两句吧...

相关阅读