Why is the margin of a div not factored into the calculation when it

Currently, I am focusing on practicing basic CSS. My goal is to achieve a specific layout for the header of a webpage that resembles this image with a wide top margin: wide top margin.

Here is the HTML code I am working with:

    <div class="header">
.
.
.
    </div>
    <div class="page">
        <div class="page-inside">
            <div class="row-apps">
                <div class="row-apps-item">
                    <img src="02.jpg" class="row-apps-img">
                    Kurikulum
                </div>
                <div class="row-apps-item">
                    <img src="03.jpg" class="row-apps-img">
                    Status Mahasiswa
.
.
.
                </div>
            </div>
        </div>
    </div>

And here is the associated CSS code:

.page {
    height: 1000px;
    padding: 0;
    background-color:rgb(31, 31, 31);
}

.page-inside {
    width: 1000px;
    margin: 30px auto;
}

.row-apps {
    padding: 10px;
    overflow: hidden;
}

.row-apps-item {
    color: rgb(57, 57, 207);
    width: 16.66%;
    float: left;
    padding: 5px 10px;
}

My intention is to have a 30px space between .page and .page-inside containers, both of which have a black background. However, upon implementation, I noticed that the space appears between .header and .page-inside instead, resulting in a broken top margin like shown here: broken top margin. Through Chrome dev tools, I confirmed that the white space is indeed coming from .page-inside and not from header or .page.

Although I could simply add padding to either .page-inside or .row-items to fix the issue, I believe that adding margin should also achieve the desired result. What am I misunderstanding in this scenario?

htmlcssmargin

Answer №1

When working with CSS, the margin property is used to create space around an element. For example, adding margin: 30px auto to the .page-inside container will result in adding 30px of top and bottom "space" around the content of .page-inside. This extra space is what causes the 30px gap between the .page and the navigation bar. This occurs because .page-inside is the first child of the parent container .page with no content preceding it in the normal flow. Therefore, applying margin: 30px auto to .page-inside is essentially equivalent to applying it to .page since they start at the same point in the document.

On the other hand, the padding property is used to create space within an element. To move the main content within .page-inside down by 30px, you can simply use padding like padding: 30px 0. This will add 30px of space at the top and bottom within the .page-inside element while maintaining 0px of space on the left and right.

body {
  margin: 0;
}

.page {
    height: 1000px;
    padding: 0;
    background-color:rgb(31, 31, 31);
}

.page-inside {
    width: 1000px;
    padding: 30px 0;
    max-width: 95ch;
    margin: 0 auto;
    /*margin: 30px auto;*/
}

.row-apps {
    padding: 10px;
    overflow: hidden;
}

.row-apps-item {
    color: rgb(57, 57, 207);
    width: 16.66%;
    float: left;
    padding: 5px 10px;
}

nav {
  background: hsl(0, 0%, 20%);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 90ch;
  padding: .5rem 1rem;
  color: #fff;
  margin: 0 auto;
}

nav ul {
  display: flex;
  align-items: center;
  list-style-type: none;
}

nav ul li {
  padding: 0 .75rem;
}
<nav>
  <div class="row">
    <div>
      <span>Applications</span>
    </div>
    <div>
      <ul>
        <li>ID</li>
        <li>EN</li>
        <li>Suleiman</li>
      </ul>
    </div>
  </div>
</nav>
<div class="header">
    </div>
    <div class="page">
        <div class="page-inside">
            <div class="row-apps">
                <div class="row-apps-item">
                    <img src="02.jpg" class="row-apps-img">
                    Curriculum
                </div>
                <div class="row-apps-item">
                    <img src="03.jpg" class="row-apps-img">
                    Student Status
                </div>
            </div>
        </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

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

htmlcontent-security-policy

Having trouble with GSAP Scrolltrigger PIN functionality in Next.js?

When I comment out the pin: true property in my code snippet below, everything works as expected except that the container wrapping the sections that should scroll horizontally does not stick to the top. However, if I uncomment the pin: true line, the enti ...

cssreactjsnext.jscss-animationsgsap

I recently created a Python3 script utilizing selenium to automate message sending, but unfortunately, it is not functioning as expected

I've written a script (https://pastebin.com/dWLFvirn) that I'm trying to run through the terminal, but it's giving me an error. Here's a screenshot of the error (https://ibb.co/NSfLgL8). I would like to use "" as the link to make the s ...

pythonhtmlseleniumpython-3.6

Are you looking for methods to alter the elements of a webpage prior to viewing it?

I have created a page with the intention of using it as a tool, but I am facing some challenges due to my limited experience in this field. As a newcomer, I am struggling to achieve certain goals: - My objective is to modify the values of an element on a p ...

javascripthtmlcssdombootstrap-4

Guide to using jQuery to load an image

I am using this code to load an image and display it within a dialog box. <div id="image_preview" title="Client Photo Preview"> <p><img src="" alt="client image" id="client_image_preview" /></p> </div> $("#client_image_p ...

javascriptjqueryhtmlcss

Organizing content with divs in HTML/CSS

I've incorporated a theme in my designs where there is a blue bar beneath the text, like shown in the images below https://i.sstatic.net/TuVGd.png https://i.sstatic.net/CCJRo.png Currently, I've been structuring my HTML for these bars in the f ...

htmlcsstwitter-bootstrap

Videos fail to load on iPhone but load successfully on desktop and Android web browsers

I have been attempting to insert a video into my HTML page, but it's not working properly on my iPhone (I only see a crossed out play button). The video loads fine on desktop and Android devices. This issue isn't browser-related as I encounter th ...

htmliosiphonevideo

Is there a way to apply styles to a checkbox's child element depending on the checkbox's state without relying on ternary operators within Styled Components?

I am currently working on styling this component using Styled Components, but I feel like my current approach is a bit of a hack. What would be the best practice for incorporating Styled Components to style this component effectively? If I were to use Pla ...

javascriptcssreactjsstyled-components

Adjust the background hue and opacity when incorporating a "modal div"

Currently, I have a page where a hidden div appears at some point to display a form for inputting data. This could be considered a modal div. My goal is to darken the rest of the page and only allow interaction with this specific div. I want the backgroun ...

javascriptjqueryhtmlcssmodal-dialog

What occurs when Render() is called during animation in React?

Curious about how React handles rendering during a component's animation? Let's explore an example where a component is re-rendered due to a state change triggered during its animation. Imagine a scenario where a component's animation lasts ...

javascripthtmlcssreactjsreact-transition-group

Using JQuery to delete an item by clicking on the delete button and then clicking on the item to remove it

I am currently using jQuery to dynamically create items on an HTML canvas for users to drag around and create drawings in a style similar to Microsoft Visio. However, I am struggling with how to remove these items once they have been created. While I know ...

javascriptjqueryhtml

Is there a way to adjust the height of an image to be responsive in tailwind css?

<!-- this is the section with the services description and an image of an egg --> <!-- this is the first section with the description --> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> &l ...

htmlcsstailwind-css

``Advanced Web Development: Dealing with HTML5, CSS3, and

I am facing an issue while implementing a design from the CSS and HTML login form templates on my project. Below is the snippet of my HTML: <p id="firstname_line"> <label>First Name:</label> <input type="text" name="firstnam ...

htmlcss

Reset input fields while retaining placeholder text

Seeking advice on how to use this handy jQuery tool properly: $('.myDiv input').each(function () { $(this).val(""); }); Though it clears my form, I'm struggling to maintain the placeholders of the inputs. Any suggestions? C ...

javascriptjqueryhtmlplaceholder

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

jquerycss

What is the best way to enclose a handlebars expression within a span element while also making the span clickable?

In the button, the datePick string is a computed property that can be clicked on to trigger an event. However, clicking outside the datePick value inside the button does not trigger the event. Even after wrapping it inside a span and setting width: 100%, ...

htmlcssember.jshandlebars.js

Guide on retrieving inline style that has been overridden by CSS using JavaScript

<div style="background: url(http://www.example.com/image.jpg) center center/cover;"> This specific background image defined inline is being replaced by a rule in an external stylesheet: div { background-image: none !important; } Here's my q ...

javascriptjqueryhtmlcss

Animating path "d" with ReactJS and SVG upon clicking in FireFox

Visit this CodePen for more: https://codepen.io/sadpandas/pen/xxbpKvz const [currentScreen, setCurrentScreen] = React.useState(0); return ( <React.Fragment> <div> <svg className="theSvg" width="156" height="6 ...

javascriptcssreactjssvgonclick

Problem with incorporating responsive gifs

I'm new to CSS and I'm trying to incorporate an animated GIF as a smartphone screen using Bootstrap to ensure responsiveness. I've managed to get it working for larger and medium screens, but the issue arises when resizing for smaller displa ...

htmlcssresponsive-designbootstrap-4

Display the hidden div element when clicked

In my code, I have two div elements as follows: <div class='staticMap'></div> <div class='geolocation-common-map'></div> Initially, the 'geolocation-common-map' div is removed using jQuery when the pa ...

javascriptjqueryhtml