时间戳

首页 > 解决方案 > 如何仅将背景颜色属性应用于文本所在的区域？

html - 如何仅将背景颜色属性应用于文本所在的区域？

问题描述

我有一个 div 块，里面有一个背景为黑色的段落：

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: black;
                color: white;
                text-align: center;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Paragraph</p>
        </div>
    </body>
</html>

上面代码的输出是这样的： 在此处输入图像描述



我希望背景颜色仅应用于段落文本所在的区域，如下所示： 在此处输入图像描述

我不知道如何达到这种效果。谁能告诉我该怎么做？（PS你也能告诉我如何圆角吗？）

标签： htmlcssbackground-colorparagraph

解决方案

制作<p>一个 inline-block 元素并给它一个背景颜色：

div {
  color: white;
  text-align: center;
  font-size: 50px;
}

p {
  background-color: black;
  display: inline-block;
}
<div>
  <p>Paragraph</p>
</div>

如果<div>只是一个包装器，那么您可以更轻松地做到这一点：

div {
  width: min-content;
  margin: 0 auto;
  background-color: black;
  color: white;
  font-size: 50px;
}
<div>
  <p>Paragraph</p>
</div>

推荐阅读