要给子元素设置正确的边距和填充,可以使用CSS的盒模型属性来实现。以下是一个示例代码:
HTML:
子元素
CSS:
.parent {
width: 200px;
height: 200px;
background-color: lightgray;
padding: 20px;
}
.child {
width: 100%;
height: 100%;
background-color: gray;
margin: 10px;
padding: 20px;
box-sizing: border-box;
}
在上面的示例中,父元素使用了一个固定的宽度和高度,并设置了20px的内边距。子元素则使用了100%的宽度和高度,同时设置了10px的外边距和20px的内边距。同时,设置了box-sizing: border-box
属性,这样边距和填充会包含在子元素的总宽度和高度内,而不会导致子元素溢出父元素。
这样,子元素就会正确地包含有边距和填充的样式。