CSS Margin Problem - Having trouble creating a gap between <section> and <header> elements

Here is the link to my code: https://jsfiddle.net/krbomcj5/
The code is concise and should be easy for CSS experts to understand.
The problem I'm encountering is that there is no space between .main-content and .head-content.
I have managed to create a space by adding padding to .main-content.

What is a better approach to achieve this spacing between .main-content and .head-content?

Answer №1

Apply the CSS rule display: block; overflow: hidden to the element with the class .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; }

You can view the code on Codepen by following this link

Answer №2

Add display: inline-block; to the heading

.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>

Answer №3

To create space around your content, consider using padding. Another option is to adjust the top property for more control.

If you're experiencing issues with your example, try adding display: block to the header.

For a helpful guide on CSS layouts, check out this tutorial: .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize Your Contact Form in Wordpress with a Stylish 2-Column Layout

Hey there, I've encountered a little problem with my website. My website is built on Wordpress and uses Contact Form 7, which has been heavily customized with CSS. While it looks great on desktop, the email field appears too small on mobile devices. I ...

Change a div to scroll vertically instead of expanding to accommodate its content

I am facing an issue with the layout I have created. It consists of a scrollable list of items in the center, with additional content above and below it in a column. The challenge is to make the list occupy all available empty space within the column witho ...

Don't forget the last click you made

Looking for a way to style a link differently after it has been clicked and the user navigates away from the page? Check out this code snippet I've been using: $(document).ready(function(){ var url = document.URL; function contains(search, find) { ...

Design all buttons, except for the two specific buttons

.button , button{ border:solid black 2px !important; } Using this code, I have added a border to all buttons. But now, I need to exclude the buttons "searchsubmit" and "single_add_to_cart_button" from having a border. How can I achieve that? ...

adjust the width of each individual cell in the table to create a varied layout

For my web app, I am working on a table that will contain multiple <tr> and <td> Here's the code snippet: <tr> <th style="width:30px;">date</th> </tr> <tr> <td>10-10-2016</td> </tr> E ...

Retrieving data from the database without the need to reload the page

Hi there! I have a PHP script that fetches data from a database and I want to display this data within a div element with a "link" class without having to reload the page. Check out the code snippet below: <? include('config.php'); $rs = m ...

Why isn't the card positioned in the center of the screen?

Why is the card not centered on the screen as it is supposed to be? I am utilizing Bootstrap 4.5 <div class="container"> <div class="row"> <div class"col"></div> <div class="col-8"> <div class="card"> ...

Experiencing excessive sliding down of JQuery accordion repeatedly

I have a unique accordion feature that expands to display further information when each button is clicked. While it works fine, I am facing an issue where the box seems to slide up and down multiple times before showing the full content. Ideally, I would l ...

Is there a way to create an image gallery layout similar to Pinterest using CSS?

I am currently developing a dynamic PHP gallery that will feature thumbnails with the same width but varying heights. These thumbnails will be arranged from left to right, so I would prefer not to use a traditional five-column layout. I suspect that achiev ...

Using Django variable in li a:nth-child selector produces unexpected results

Currently, I am honing my web programming skills by working on a personal blog in Django. However, I have encountered a hurdle. My intention was to enable the webpage to recognize which menu element is active by passing an argument from views.py to the tem ...

Center the text in links at the bottom of the screen using Flexbox

It feels too early on a Monday morning for this. I have successfully used flexbox to align the overall page, but I am facing trouble aligning the individual link items. Specifically, I want to align the text of the links to the bottom. I tried using verti ...

Display flash messages consistently in a designated area on the webpage instead of appearing at the top of the page in Flask

{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}" style=" ...

When the md-menu is clicked, the Top Nav shifts upwards along with the mdDialog buttons

Currently, I am in the process of developing a website using AngularJS and ASP.NET, incorporating Angular Material. However, I encountered an issue where scrolling on the page causes the top navigation to move up the body or essentially "disappear" when cl ...

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

`ASP.NET utilized for displaying several pictures on a website`

My goal is to retrieve images from a database and showcase them on a webpage. I am looking to incorporate a "show more images" button in case there are too many images to display at once. Additionally, I would like for the additional images to load autom ...

Guide on enabling the scrollbar within a text area while utilizing the pointer-events: none property

After applying the CSS rule pointer-events: none to the text area, I noticed that the scrollbar was disabled. I need the scrollbar to remain enabled so that users can scroll and view the entire content, while still preventing editing within the textarea u ...

Tips for adjusting the height of both an iframe and a div to fit perfectly at 100% combined

Struggling to make an iframe and div both have 100% full height on the page? I need a footer menu with 280px height, leaving the rest of the page for the iframe. After extensive research, it seems like jQuery might be necessary as CSS Flex didn't wor ...

Generate various pop-up windows on the screen

As a beginner in jQuery, I am currently exploring how to create multiple popups within a window. My goal is to have each text trigger a different popup with unique content. Additionally, I would like the popups to close when clicked outside of the modal, r ...

What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

Is there a way to align the line to the right of the text when it's not selected, and have a new line appear on the left side that pushes the text and removes the line on the right side? Here is the design I'm trying to emulate. If you click t ...

Guidelines for implementing a seamless translation effect with CSS3

CSS: .horizon { position: absolute; top: 380px; width: 1800px; height: 50px; background: url(images/road.png) repeat-x; -webkit-animation-name: prop-600; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: i ...