What causes the gap between a parent div and inner div in react components?

I have a relatively simple React component that I'm working on. Even though I am quite new to React, I have tried various methods to eliminate the white space issue but so far have been unsuccessful in determining what is causing it. Negative margin seems to be a temporary fix, but I understand that it's not the best solution. Can someone please provide guidance on how to resolve this?
import React, { Component } from 'react';

class Shopdetail extends Component{
    constructor(props){
        super(props);
        this.state={            
            data: this.props.data,
            redirect:false

        };        
    }
    componentDidMount(){
        console.log(this.props.match.params.idUser);
    }
        render(){
            return(
                <div style={{ verticalAlign: 'top',margin:'0',clear:'both'}}>
                    <div style={{background:'#cc5',width:'100%',height:'100px',verticalAlign: 'top',boxSizing: 'border-box',clear:'both',padding:'0'}}>Hey</div>
                </div>

            )
        }
}
export default Shopdetail

Here is a screenshot for reference:

Answer №1

To eliminate margin from the body, you can either remove it entirely or include the following code:

body{
   margin : 0px !important;
}

Answer №2

Each web browser comes with its own default styles for every HTML element.

Consider how the font size of an h1 tag is typically larger than that of a p tag...!! These default styles are part of what's known as the User Agent StyleSheet.

The User Agent StyleSheet includes predefined margin and padding values for each HTML tag (with different values for each tag).

A recommended practice is to always reset these default margin and padding values using universal selection at the start of a project:

*,
*:after,
*:before {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

Answer №3

For a clean slate in your CSS, consider using this reset code at the beginning of your stylesheet:

<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
</style>

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

How to retrieve the value of an element within a facebox div with jquery

On my page, I have two div tags displayed below. Whenever I try to retrieve the value of the itemName element using $('#itemName').val();, it always returns the value of the element in the first div (which is blank). Is there a way to access the ...

Converting intricate HTML table data into JSON format with the help of jQuery

Looking to extract JSON data from selected rows in the HTML table below using jQuery. The JSON output should include any user-entered comments from the textboxes. Any guidance or suggestions would be greatly appreciated. <table id="potable_grid" class ...

Combining HTML, PHP, and Ajax within a single document

Hey everyone! I'm diving back into web programming and challenging myself to create a simple mailing form using just HTML, PHP, and Ajax all within a single file. The goal is to have a self-contained HTML document that doesn't refresh when the fo ...

What is the process for setting a background image on a Button component using Material-UI in a React

I am struggling to figure out how to add a background image to a Material-ui button in React. I attempted adding 'backgroundImage' to the styles, but it didn't work. Can someone help me make this work? Here is my code: const useStyles ...

Exploring TypeScript implementation of Redux toolkit's store

I'm currently diving into the world of Redux in React + TypeScript by following the tutorials provided by Redux Toolkit. I am attempting to implement it in a sample application. My main struggle lies with typings related to the store and the mappStat ...

Can simply adding Bootstrap CDN make a website responsive?

Is Bootstrap truly self-sufficient when it comes to responsive design, or do custom webpages utilizing Bootstrap require additional responsive instructions? If I incorporate the Bootstrap CDN and utilize its built-in components, can I assume the webpage ...

The function onClick does not function properly when used with the <p> element, but it works flawlessly with the <button> element

export function SignoutButton() { return ( <p onClick={() => signOut({ callbackUrl: "/" })}> <IoIosLogOut /> Logout </p> ); } I was struggling with a function in my next.js project that wasn't wo ...

Changing Axios requests to send data as a JSON objectDo you need to know how

Looking at the title, there is a scenario where you execute a axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (erro ...

The post page remains out of reach for Ajax

I've been struggling for hours to identify the issue with this code. I realized that I am unable to access the updateuser.php file even though it is in the same directory and the filenames are correct. Can someone please review the code below and let ...

The background image for a pseudo element is not functioning as expected

After researching various solutions on Stack Overflow, I attempted to set fixed dimensions for the pseudo element (height: X px; width: X px;), but this is not an ideal solution for me as I require a scalable and responsive image that fits its parent eleme ...

The hover effect on the menu button is not covering the entire button when the screen is resized

It appears that I am encountering a problem with the hover functionality. When my screen is at full size, hovering over a menu option causes the entire background color to change. However, upon resizing the screen, only a part of the background color chang ...

What are the steps to achieve the desired PrimeFaces theme appearance for selectOneMenu?

Need help with a JSF Primefaces project using the omega theme. The selectOneMenu dropdowns are not displaying correctly (missing line). Current look: https://i.stack.imgur.com/vF4ms.png Expected look: https://i.stack.imgur.com/hXsIB.png Any suggestion ...

Steps to create a scrollable material-ui Modal

After setting up a Modal, I encountered an issue where the text describing my app inside the modal was overflowing, making it impossible to see the top and bottom parts. To solve this problem, I want to implement scroll functionality within the component s ...

Issues with local storage ternary expression in React are causing unexpected behavior

I am attempting to accomplish this task. const userToken = localStorage.getItem('token') {userToken.length ? null : <div className='registerLogin'> Register... </div> } The ternary operator is not working ...

Error: Attempting to access property 'map' of an undefined value

I am currently working on setting up a unit test for the code snippet below. I have identified where the error is occurring: populateActionDropdown = (actionList) => { let actions = actionList.map(action => { if (action.Name != 'Sig ...

Tips for enlarging an image by tapping on it in handlebars

I currently have the handlebars template engine integrated with node.js, and I'm facing an issue where thumbnail images from the database are displaying at a fixed width and height of 70. Is there a way to enable users to click on these images in orde ...

The fix for the unresponsive fixed container in Angular 2 Material

I've encountered an issue with CSS and Angular 2 material. Any element with a fixed position doesn't behave as expected inside an md-sidenav-container. However, when it is placed outside the container, it works perfectly. I have created a Plunker ...

Trouble with addClass function not functioning properly on dynamically generated list items while using search feature in Laravel 5

Seeking assistance with a search form that allows users to search for products. Search Form: <form class="navbar-form pull-right no_padding m_top_0 m_bottom_0 formSearchProduct" role="search" onsubmit="return false;" autocomplete="off"> <inp ...

What is the best way to incorporate items into Redux reducers?

Incorporating Redux with Next JS, I am faced with the challenge of adding an array of objects to it. Within my application, there exists a form containing multiple inputs, and in order to accommodate these inputs, I have structured a form consisting of 10 ...

The style properties of Material UI ButtonGroup are not being properly applied

Within a Grid container, I have a Product image with associated buttons. The visibility of these buttons is determined by specific state variables. If the product quantity is 0, an "ADD TO CART" button is displayed; otherwise, a Button Group with '-&a ...