Question

我在下面有以下div和h2元素。我试图用蓝色填充整个div，但不是像我期望的那样填充整个container2类只填充h2部分。为什么要这样做？如何填充整个container2部分（在h2区域外面有一些边距和填充？

    h2 {
      color: white;
      font-size: 35px;
      font-weight: 500;
    }
    
    .container2 {
      text-align: center;
      font-family: Carnas-Light;
      background-color: #0f2c4d;
      margin-top: 40px;
      margin-bottom: 40px;
      padding-right: 15px;
      padding-left: 15px;
      width: 83.33333333%;
      margin-left: 8.33333333%;
      height: 100%;
    }

  <div class="container2">
                        <h2>WorkWave provides intuitive cloud-based field service & fleet management solutions that help organizations with a mobile workforce transform their business.</h2>
                </div>

Answer 1

只需将下一个样式代码添加到样式表中即可：

.container2 > h2 {
  background-color: #0f2c4d;
}

您的方式不起作用，因为您只为父元素container2设置 BG-color ，而不是使用继承和h2元素。

运行代码：

    h2 {
      color: white;
      font-size: 35px;
      font-weight: 500;
    }
    
    .container2 {
	    text-align: center;
	    font-family: Carnas-Light;
	    background-color: #0f2c4d;
	    padding-top: 40px;
	    padding-bottom: 40px;
	    padding-right: 15px;
	    padding-left: 15px;
	    width: 83.33333333%;
	    margin-left: 8.33333333%;
	    height: 100%;
    }

    .container2 > h2 {
      background-color: #0f2c4d;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>

  <style>


  </style>

</head>
<body>
	
	<div style="background-color: #0f2c4d;">
		<div class="container2">
            <h2>WorkWave provides intuitive cloud-based field service &amp; fleet management solutions that help organizations with a mobile workforce transform their business.</h2>
        </div>
    </div>

<script>


</script>

</body>
</html>

背景颜色仅填充h2元素而不是其整个div容器

1 个答案: