div标签和p标签背景色

首页课程实战体系课手记专栏慕课教程

div标签和p标签背景色

来源：7-2 选择练习

hor5

2023-01-05 10:18:10

老师，您好！如图这种div标签和p标签的背景色不同是如何设置的？

尝试过的解决方式：

我实际给div和p标签设置了背景色，实际只显示p标签的背景色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            text-align: center;
            line-height: 200px; 
            background: black;
        }

        p {
            font-size: 16px;
            color: red;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <p>你好，世界！</p>
    </div>
</body>
</html>

写回答

1回答

好帮手慕小小

2023-01-05

已采纳

同学你好，div背景颜色设置成功了，只不过被p标签挡住了，实现上述效果，可参考如下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
text-align: center;
background: black;
/* 盒子模型，后续课程会学习到（第九章） */
box-sizing: border-box;
padding: 60px 0px;
line-height: 80px; //行高
}

p {
margin: 0px; //外边距0
font-size: 16px;
color: red;
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>你好，世界！</p>
</div>
</body>
</html>

祝学习愉快~

hor5

hp>好的，谢谢老师!

h023-01-09

共1条回复

0 学习 · 9886 问题

查看课程

相似问题

body标签疑问

回答 1

a标签按钮实现问题

回答 1

a标签疑问

回答 1

打开慕课网App查看更多内容