Question

我正在制作我的第一个CSS设计，并且我遇到了一个问题，即标题的背景超出了标题的右侧。

MWE：

header{
    background-color: #FF0000;
    padding: 20px;
}

HTML：

<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="ArtStoreInitial.css"/>
<link href="https://fonts.googleapis.com/css?family=Six+Caps" 
rel="stylesheet">
<meta charset="utf-8">
<title>Hypothetical Art Store</title>
</head>
<body>
<header>
     <h1>Hypothetical Art Store</h1>
     <h2>Super cool tagline will go here</h2>
</header>

如果我使用display: inline;，它会完全打破标题。

有没有办法包装它，给它一个边距并同时给它填充？我是否需要硬编码？这看起来不对。

编辑： box-sizing设置为border-box或content-box无效

Answer 1

将显示属性设置为inline-block

header {
  background-color: #FF0000;
  padding: 20px;
  display: inline-block;
}

<header>
  <h1>Hypothetical Art Store</h1>
  <h2>Super cool tagline will go here</h2>
</header>

CSS标题填充扩展到窗口右侧

1 个答案: