为何p标签无法垂直换行？代码设置问题排查

嘿，我来帮你排查一下问题！

首先，咱们得明确：<p>标签本身是块级元素，默认情况下会自动占据一整行，前后都会换行，所以正常来说你的两个p标签应该是上下排列的。现在它们挤在同一行，大概率是某个CSS规则改变了它们的默认行为，我整理了几个可能的原因和解决办法：

可能的问题1：p标签的display属性被修改了 #

如果你的代码里（包括你没贴出来的其他CSS）不小心给p标签设置了display: inline或者display: inline-block，它们就会变成行内/行内块元素，从而并排显示。
解决办法：给你的p标签明确设置display: block，比如在CSS里加：

.create-holiday p {
  display: block;
}

可能的问题2：父元素div被设置了Flex布局 #

如果你的.create-holiday类不小心加了display: flex，那它的子元素会默认横向排列。
解决办法：要么去掉父元素的display: flex，要么给父元素加flex-direction: column让子元素纵向排列：

.create-holiday {
  flex-direction: column;
}

可能的问题3：CSS规则没正确生效 #

比如你没把CSS代码放在<style>标签里，或者class名拼写错误，导致浏览器没解析到你的样式，反而有其他全局样式影响了p标签。
解决办法：检查你的CSS是否正确嵌入到HTML的<head>里的<style>标签中，像这样：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 你的CSS代码放在这里 */
    .create-holiday * { 
      margin-top: 100px; 
      text-align: center; 
      /* 这里的vertical-align: middle对块级元素无效，可以删掉 */
    } 
    .create-holiday-title { 
      width: 297px; 
      height: 22px; 
      color: #333333; 
      font-family: Montserrat; 
      font-size: 22px; 
      font-weight: 700; 
    } 
    .create-holiday-subtitle { 
      width: 276px; 
      height: 18px; 
      color: #333333; 
      font-family: Roboto; 
      font-size: 18px; 
      font-weight: 300; 
    }
  </style>
</head>
<body>
  <div class="create-holiday"> 
    <p class="create-holiday-title">Create your holiday activity</p> 
    <p class="create-holiday-subtitle">Hi! What are your holiday interests?</p> 
  </div>
</body>
</html>

另外提一句：你CSS里的vertical-align: middle对块级元素的p标签是无效的，完全可以删掉，它不会影响换行，但留着也没用。

你可以先检查这几个点，应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者popop