Having extra space can occur when adding margin to a div within another div in HTML5

I am facing an issue with the following piece of code:

  <body>
    <div class="page-top">
      *
    </div>
    <div class="page-bottom">
      <div class="contentbox">
        <h1>CONTENTBOX</h1>
      </div>
    </div>
  </body>

Here is the corresponding stylesheet:

body {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

div.page-top {
  padding-bottom: 20%;
}

div.page-bottom {
  padding-bottom: 80%;

  background-image: url('http://hd.wallpaperswide.com/thumbs/fog_at_the_pink_house-t2.jpg');
}

div.contentbox {
  background-color: red;
  margin-top: 10%; <!PROBLEM>

}

The problem arises when I add a top margin to the contentbox as described in the code snippet. Instead of positioning the div just ten percent below the top line of the 'parent' div (.page-bottom), it creates empty space above both divs.

My goal is to have the content div with a margin of approximately 20% on all sides, making it a smaller div (contentbox) within a fullscreen div (page-bottom).

For clarification: click here for the image

Thank you for your assistance, and feel free to ask for more information if needed!

csshtml

Answer №1

When applying a margin, content is shifted in the opposite direction, even within nested elements. It would be more effective to use padding-top for your .page-bottom class instead.

Answer №2

To create more space between the .contentbox and its parent div, you can include padding-top: 10%; in the .page-bottom styles. Refer to the modified code snippet below for clarity.

body {
  margin: 0;
}

.page-top {
  background-color: blue;
  padding-bottom: 20%;
}

.page-bottom {
  padding-top: 10%; 
  padding-bottom: 80%;
  background-image: url('http://hd.wallpaperswide.com/thumbs/fog_at_the_pink_house-t2.jpg');
}

.contentbox {
  background-color: red;
}
    <div class="page-top">
      *
    </div>
    <div class="page-bottom">
      <div class="contentbox">
        <h1>CONTENTBOX</h1>
      </div>
    </div>

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

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...

javascripthtmlcssreactjsredux

I am currently working on creating a timer and I am looking to position these three buttons in a circular formation

I want to create a stopwatch with 3 responsive buttons arranged in a circular layout. I have successfully built a responsive circle and now need help adding the buttons inside the circle next to the timer. To view the code, click here: https://jsfiddle.ne ...

htmlcssbootstrap-4

Enhancing the style of the top menu Index by applying a border-bottom effect when hovering over it in a CSS Horizontal Drop Down Menu

I'm having trouble adding a border-bottom: 1px solid #FFF to all the top menu (index) items when they are hovered over. Can anyone help me with this? #menu{ padding:0; margin:0; position: fixed; top: 30px; left: 0px; font-size ...

htmlcss

Differences in font line spacing between Firefox on Windows 7 and Windows XP

Currently, I am utilizing the Verdana font for my text paragraphs. However, an issue has arisen with how this font renders in Firefox v16 on Windows XP compared to Firefox v16 on Windows 7. Interestingly enough, Internet Explorer 9 does not display any pro ...

htmlcsswindowsfirefoxfont-size

Having trouble dynamically displaying the '<' symbol using JavaScript?

Whenever I attempt to show a string with the character '<' in it, the part of the string that comes after the symbol is not displayed. Strangely enough, when I output it to the console, it appears correctly. Take a look at this excerpt showcas ...

javascripthtml

What is preventing me from adjusting the height of this DIV element?

I'm completely stumped by what's happening here. I've been trying to increase the height of a DIV element with an id of #titleStrip, but it just won't budge. It's beyond frustrating. I thought I knew my way around this kind of thin ...

htmlcss

Unable to implement a design on a button during its click event

I successfully implemented a dynamic button in HTML5 and Javascript. The button has a click event assigned to it, so when clicked, its content and background color are supposed to change. However, while the content changes correctly, the background color d ...

htmlcssdom

Customize the size of innerWidth and innerHeight in your THREEjs project

Is there a way to customize the size of the window where this function launches instead of it automatically calculating the height and width? I've attempted to modify this section of the code, but haven't had any success so far: renderer.setSiz ...

javascripthtmlthree.js

Interactive data visualization with hover-over details

I am utilizing datamaps to showcase the countries of the world, however, I want the graph to be centered. The issue arises when I hover over a country and the pop up appears all the way to the left, aligned with where the country would be if it wasn't ...

javascripthtmlcssd3.jsdatamaps

Tips for adding animation to the div instead of the content

I have implemented a hover animation to animate the div, but unfortunately, when I added the animation to #i :hover {}, it ended up animating the words only. Moreover, the cursor transforms into a pointer solely when hovering over the words instead of the ...

htmlcsscss-animations

The ng-repeat ng-switch combination is not functioning as expected

My data can be simplified to the following in my code: function DemoCtrl($scope) { $scope.myData= [ {text: "blah", other: 3, V: 'caseOne'}, {text: "blah", other: 3, V: 'caseTwo'}, {text: "blah", other: 3, V ...

javascripthtmlangularjs

Bootstrap doesn't display in the dropdown menu

Struggling to get a dropdown menu to display on my page, my HTML code is: <div class="dropdown d-inline"> <div class="widget-header mr-3"> <button href="#" class="icon icon-sm rounded-circle border" data-toggle="dropdown"><i cl ...

htmllaravelbootstrap-4drop-down-menu

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

javascriptjqueryhtmlangularjsfunction

Deleting content in a text area when specific text is entered

Is there a way to clear the textarea value if I type in <br>? The code I have right now is shown below. I understand that this may seem like an odd request, but I am experimenting with a typing effect. function eraseText() { document.getElemen ...

javascripthtml

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

javascripthtmlcss

Jquery div mysteriously disappearing without explanation

I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...

jquerycssjquery-selectors

What could be causing my website to automatically adjust the CSS height on its own?

My code looks like this: <li style = "height: 250px;"> <p>Foo</p></li> Despite my efforts, when I visit the website, the height doesn't seem to change. After inspecting the element in Chrome, I discovered that it's s ...

htmlcssheighthtml-lists

Fixing a div at the top post scroll - bug on iOS mobile device

I am looking to achieve a similar effect as demonstrated in the example below: https://css-tricks.com/scroll-fix-content/ Essentially, the goal is to have a div become fixed at the top of the page after scrolling to a certain point. Initially, the div wil ...

javascriptjqueryhtmlcss

A modern CSS solution for a fixed columns and header layout in a scrollable table

How can I create a table with minimal JavaScript using modern CSS? I am aiming to include the following features: Fixed column(s) (positioning and width) Scrollable in both X and Y axes Responsive in the X axis (for non-fixed width columns). https://i. ...

javascripthtmlcsshtml-table

Encountered an error while trying to click the cookie button using Selenium: "object[] does not have a size or

I've been struggling to interact with a button inside a pop-up using Selenium, but I keep encountering this error: object [HTMLDivElement] has no size and location I initially tried to simply click the button since it is visible on the page and I wai ...

javascripthtmlseleniumselenium-webdriver