I have a Button component where I do something like this

.buttonComponent{
  paddingTop:100;
  paddingRight:100;
}

This component renders beneath another sibling component, so I adjust the padding. However, sometimes, the sibling component takes a while to load, so the button renders as if this was the css. How can I make sure it renders in the correct position from the start?

.buttonComponent{
   paddingTop: 0,
   paddingRight: 0;
}

.buttonComponent{
   paddingTop:100;
   paddingRight:100;
}

.buttonComponent{
   paddingTop: 0,
   paddingRight: 0;
}

CodePudding user response：

Make sure CSS code is above the HTML in your document. This should prevent browsers from rendering content and then applying style, with a messy gap of a few milliseconds.

CodePudding user response：

I don't understand what is your question? but i think that-

1. You need to reset your CSS by global by using following code in style sheet-

   *{ padding:0; margin:0; }

2. check the import files in your reactjs files. Some time visual code/any code emulator doesn't import files correctly.

3. if you're using reactjs then i will give an advice to use tailwind CSS. Hope you like it.