+
80
-

css中怎么解决子元素width 100%加上padding margin溢出问题?

请问css中怎么解决子元素width 100%加上padding margin溢出问题?

网友回复

+
0
-

如果子元素要增加margin的话就在父元素上增加padding,并在父元素增加 box-sizing: border-box;设置他以后border和padding全会算在你设置的宽度内部。示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <style>
        body {
            padding: 20px;
            margin: 0;
        }

        .parent {
            width: 100%;
            padding: 20px;
          
            background-color: green;
            border: 1px solid #E74D4D;
             box-sizing: border-box;
            
        }
        .child {
            width: 100%;
 
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div class="parent">
        <div class="child">

            我是子元素
        </div>
    </div>
</body>
</html>

我知道答案,我要回答