0

My code is up here : https://jsfiddle.net/krbomcj5/
It's small and self explanatory for a CSS pro.
What's the issue is, I'm expecting a space between the .main-content and .head-content.
I'm able to achieve it by adding a padding to .main-content.

What is the alternate best practice if I want to get a space between .main-content and .head-content

  • 1
    Why not add padding to `.main-content`? Seems to me as the correct way. – Manuel Otto May 17 '18 at 10:53
  • I want to achieve it by modifying .head-content and not .main-content –  May 17 '18 at 10:54
  • You could add `overflow: auto;` to `.main-content`. It then will regard the margin of the child, though youre technically still modyfing the main-content. plus it adds scrollbars if the content is overflowing... – Manuel Otto May 17 '18 at 10:55

3 Answers3

0

set display: inline-block; to head

.main-content {
  background-color: #28AFB0;
  width: 99%;
  height : 1000px;
  text-align: center;
  margin: 10px auto;
}

.head-content {
  display: inline-block;
  background-color: #1F271B;
  height: 90px;
  width: 95%;
  margin: 10px auto;

}
<body>
  <section class="main-content">
    <header class="head-content">

    </header>
  </section>
</body>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
0

Padding is the way to go. You can also use the top property which requires some tweaks.

Setting display: block for header solves the issue in your example.

A good tutorial regarding layouts with css: http://learnlayout.com/.

0

Use display: block; overflow: hidden to the .main-content

.main-content {
  background-color: #28AFB0;
  width: 99%;
  height : 1000px;
  text-align: center;
  margin: 10px auto;
  display: block; overflow: hidden;}


.head-content {
  background-color: #1F271B;
  height: 90px;
  width: 95%;
  margin: 150px auto; }

Here is the codepen

Shihab
  • 199
  • 1
  • 16