html - CSS3 : positioning rectangle at the same hight as text (`h1` and `p` ) in header

Question

h1 左边需要一个矩形和 p header 中的元素.所以我使用了一个 div 来对这两个元素进行分组。现在需要在它们的左侧有一个具有相似高度的矩形。查看预期结果以获得更好的理解。

1.-我在一个 div 中创建了一个矩形。
2.-我将它放在左侧(<h1> 标题旁边)。

3.-我想把矩形放在与标题相同的高度(<h1>)。

3.1.- 我试过使用 padding但它修改了矩形的大小。

3.2.- 我试过了 position:relative没有成功。

4.- 也尝试过但没有成功:

header div#titulo {
border-left: 6px solid #000;
padding-left: 30px;
}

我的结果:

期望的结果:

HTML:

       <header>
    <div id="rectangle">  
    </div>
    <div id="titulo"><h1>omronlesdaz.com</h1>
    <p>Digital analyst - R programmer</p>
    </div>

    </header>

CSS:

header {
    /*text-align: left;*/
    padding: 0px 0px 40px 80px;
    background: gray;
    height: auto;
    overflow: hidden;
}



#rectangle {
    border: dashed;
    float: left;
    width:10px;
    height:100px;
    background:#37B7DE;
    /*position: relative; #No effect*/
    /*padding: 20px; #Distorts the rectangle*/
}


#titulo {
    float: left;
    padding: 20px 0px 20px 20px;
}

更新 1:

1 .- 解决方案需要对 h1 进行分组和 p将它们视为一个整体。所以矩形在两者的左边(因为它们是一个元素)，而不仅仅是在 h1 的左边。标签。

2.- 矩形不得从页面顶部开始，但必须与 h1 处于同一高度标记并以与 p 相同的高度结束标签。这就是为什么我认为最好将它们分组在一个 div 中。

Answer 1

为什么一开始要多做一个 div？您不需要创建一个 div 来应用 border 属性，您可以将它应用到 h1 标签本身。 h1 充当 div 本身。您可以在 h1 标签上应用 border-left 属性并给它一个左填充，以便文本出现在所需的位置。

CSS:

#titulo h1{
border-left: 6px solid #000;
padding-left: 30px;
}

看看这是否有效。

编辑:

只需使用这个 CSS:

#titulo h1{
margin: 0;
} 

解决方案:http://codepen.io/vikrantnegi007/pen/jPdpPy