CSSの枠線/輪郭線の上に行く人

Question

誰かが助けてくれますか？私は多くのことを試みたが、まだ成功していない。

Answer 1

あなたは、ヘッダーにマイナスのマージンを使用してそれを達成することができます。

私のデザインの選択肢はありませんが、可能です。

* { margin: 0; padding: 0; } 
 
body { 
 
    padding: 1em; 
 
} 
 
div { 
 
    padding: 1em; 
 
    border: 1px solid black; 
 
} 
 
h3 { 
 
    margin-top: -1.5em; 
 
    margin-bottom: 1em; 
 
    border-bottom: 1px solid black; 
 
} 
 
p { 
 
    border-left: 1px solid black; 
 
}

<div> 
 
    <h3>Chapter</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales velit non ligula dictum, vitae sagittis diam maximus. Vivamus finibus, nibh sed fringilla accumsan, mi neque convallis lorem, et viverra quam libero vel risus. Maecenas varius blandit dui, et suscipit massa sodales tincidunt. Donec at dui blandit, sollicitudin elit nec, tincidunt dui. Aenean facilisis tellus et velit mollis, nec efficitur lacus volutpat. Proin dapibus odio sem, fringilla ullamcorper tellus porta eget. Nunc sed egestas enim, eget gravida urna.</p> 
 
</div>