Struggling to resolve a basic issue with the header on a straightforward HTML webpage

Task is as simple as it gets, yet I can't seem to grasp it. I put together a basic HTML Snippet. Check out my Code Pen

In the pen, there are 3 nested divs, with div1 serving as the main div for my React Application. The background color of the body is set to pink. I included a div => header and another div => logo. Now the header div has a background color of green. So far so good. Within my logo div, I placed an img tag. Not satisfied with the image's position, I added a margin-top to my logo div. My goal was for the logo div to have margin from the top of the header div in green. However, instead of that, a margin appeared between the body top and the header div.

https://i.sstatic.net/GT2zh.png

I am puzzled as to why this is happening. Any suggestions?

htmlcss

Answer №1

The #logo element's margin extends beyond its parent container. For more information, check out this helpful link -> CSS margin terror; Margin adds space outside parent element

Answer №2

        body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.App {
  text-align: center;
}
img {
    width: 10%;
    height:50px; 
    float: left;
    margin-left: 50px;
    margin-top: 25px !important;
}
<html lang="en">
<link rel="stylesheet" href="style.css">

<body style="background: pink;/* top: 0; */">
  <div id="root" style="
    /* top: 0px; */
    /* position: absolute; */
">
    <div style="background: rgb(203, 233, 215); height: 100px">
      <div id="header">
        <div id="logo" class="zbuda"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Logo_NIKE.svg/1200px-Logo_NIKE.svg.png">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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

Ensure each list item is directly aligned when swiping on a mobile device

Looking to make a simple horizontal list swipeable on mobile devices with tabs that snap from tab to tab, activating the content for the active tab immediately. The desired effect is to swipe directly from one tab to the next without having to click separ ...

javascriptjqueryhtmljquery-mobilemobile

How can EJS variables be utilized within HTML input fields?

I am facing an issue while trying to use a checkbox to redirect selected users to a new page. I am looking for a solution on how this can be achieved, especially when using mongodb to store the information. Below is my current code snippet: Firstly, I ren ...

htmlnode.jsexpress

When my website is viewed on a local server, it is responsive and utilizes flex and bootstrap. However, now that it is hosted online, the flex function is not working properly on the mobile site

As a novice web developer, I've created a portfolio site hosted at www.j-price.co.uk. However, I've encountered a responsiveness issue after hosting it on GitHub Pages and GoDaddy. The site displays differently compared to when it's hosted l ...

htmlcssmobileresponsive-designhosting

Issue with Color Attribute in Heading within an Ionic Content Element

The color attribute doesn't seem to be working in Ionic 2. It works fine with normal Ionic tags, but not with HTML tags. Can someone help me with this? The code is provided below. <ion-content> <div class="page-home"> <h1 color="second ...

htmlcssionic-frameworkionic2

Learn how to collapse a collapsible section in Jquery Mobile by clicking on a link. Check out the example on JSFiddle

Is there a way to make the data-role collapsible collapse when clicking a tab link? I've tried using an on-click function without success. Any ideas or alternative solutions? Thanks. Check out my JSFiddle, where you can see that the tabs change but t ...

javascriptjqueryhtmljquery-mobile

Tips for eliminating corner gaps in css

As I dive into the world of CSS, I encountered an issue while working on my webpage. The problem lies in a space that appears on my displayed webpage. .grouping:before, .grouping:after { content: " "; display: table; } .grouping:after { clear: bo ...

css

Fill the second dropdown menu options based on the selection made in the first dropdown menu

I need assistance with dynamically populating my second drop-down menu based on the selection made in the first drop-down. Here are the steps I've taken so far: form.php - Utilizing javascript, I have set up a function to call getgeneral.php. The se ...

javascriptphphtmlajax

Position the right div to float to the right with a dynamic width ahead of the left div in HTML to achieve

This particular challenge has proven to be quite difficult for me, and I have a feeling that I am overlooking something simple. My goal is to create a layout with a fixed-width left sidebar and a responsive variable-width content section on the right. Th ...

htmlcssresponsive-designcss-float

Encountering problems due to the addition of an event listener on my webpage

Currently working on a nodejs app utilizing react and encountering an issue when running yarn start. The error message "TypeError: btn_bmi.addEventListener is not a function" keeps popping up. This setup has worked for me before but now I'm unsure abo ...

javascripthtmlnode.jsreactjs

Adding a color picker to a Kendo Grid

I am working with a kendo grid that has inline editing feature. I am looking to add a kendo colorpicker to a specific column. Is there a way to display the selected color even when the row is not in the editing mode? Does anyone have an example of how to ...

javascripthtmlkendo-uikendo-gridkendo-colorpicker

"By setting the HTML input box to read-only, the JavaScript button has the

Check out this js fiddle demonstration: http://jsfiddle.net/YD6PL/110/ Here is the HTML code snippet: <input type="text" value="a" readonly> <input type="text"> <input type="text"> <div> <button class="buttons">c</button ...

javascripthtml

Adding text over an image in Tailwind without the need for absolute positioning is achievable

I'm struggling to position text over an image without using absolute positioning. It's working fine on large and small screens, but I'm having trouble with medium screens. I've searched for similar questions on Stack Overflow, but none ...

csstailwind-css

What is the reason behind Firefox opting for a 2x image while Chrome goes for a 1x image when the devicePixelRatio is 1

When deciding between 1x and 2x options: Firefox will opt for 2x if devicePixelRatio is less than 1 Chromium will choose 2x if devicePixelRatio is less than 1.5 Testing this in Safari is tricky as devicePixelRatio remains constant even when scaling t ...

htmlimagefirefoxchromiumsrcset

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

phpcsscross-browser

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

Having issues with the toggle display button functionality not working properly in Angular when using click()

One of the files in my project is named server.component.ts and another is named server.component.html. This is how my server.component.ts file is structured: import { Component } from '@angular/core'; @Component({ selector: 'app-server& ...

htmlcssangulartypescript

Unearthing the worth of the closest button that was clicked

I am currently working on a profile management feature where I need to add students to the teacher's database. To achieve this, I am using jQuery and AJAX. However, I am encountering an issue where clicking the "add" button for each student listed on ...

javascriptjqueryhtmlajax

Can you explain the functionality of $on.constructor in AngularJS?

Recently, I attempted an XSS challenge on the PortSwigger labs website. You can find the challenge here. This is my solution to the XSS challenge: {{$on.constructor('alert(1)')()}} However, since I have no prior experience with AngularJS, I&apo ...

javascripthtmlangularjsframeworksxss

Adjust the color of the text in Ionic based on the condition

My current solution involves highlighting text in a small slider after a user tap, but it feels very makeshift. <ion-slide *ngFor="let loopValue of values"> <div *ngIf="viewValue == loopValue"> <b> {{loopValue}} </b> ...

cssangularionic-frameworkionic3

Creating a web form with HTML and integrating it with jQuery AJAX

Looking to fetch data from the server through jQuery AJAX on an HTML form and store the response in a PHP string variable. Here is my current code snippet: <form method="post" name="myform" id="myform" action="https://domain.com/cgi-bin/cgi.exe"> &l ...

javascriptphpjqueryhtmlajax