menu

Scrimba

The Scrimba community has now moved to Discord. Come in and chat with us today! http://bit.ly/scrimba-discord

Channels
Team

Diff in style display for react vs html

November 19, 2019 at 4:49am

Diff in style display for react vs html

November 19, 2019 at 4:49am
I'm about 1/2 way thru Bob Ziroll's React course and notice a diff in display in the 'browser' pop-up between styles posted in html and js code that I don't understand. Specifically, try this: FILE: index.html <html> <head> <style>
#grad1 {
font-family: "Impact, Charcoal, sans-serif";
font-size: 36px;
font-weight:bolder;
position: relative;
left:2px;
top:2px;
padding-top: 1%;
padding-left: 4%;
margin: auto;
display: block;
margin-top: 1%;
width: 34pt;
height: 34pt;
background: -moz-linear-gradient(red, lightpink, white, aqua, lightpink, red);
border: solid 1px black;
border-radius: 45%;
}
#grad2 {
color: lightpink;
text-shadow:
-1px 1px 2px #000000,
1px 1px 2px #000000,
-1px 1px 2px #000000,
-1px -1px 2px #000000;
}
</style>
</head> <body> <span id = "grad1"><span id="grad2">01</span></span> </body>

</html>

NOW ... Compare that output to this: FILE: index.html <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="root"></div> <script src="index.pack.js"></script> </body> </html>
FILE: index.js: import React from "react" import ReactDOM from "react-dom"
function App() { const styles1 = { fontFamily: "Impact, Charcoal, sans-serif", fontSize: 36, fontWeight: "bolder", position: "right", left: 0, top: 0, paddingTop: "1%", paddingLeft: "3.5%", //<-- DIFF PADDING margin: "auto", display: "block", marginTop: "1%", width: 44, //<-- DIFF WIDTH! height: 44, //<-- DIFF HEIGHT background: "-moz-linear-gradient(red, lightpink, white, aqua, lightpink, red)", border: "solid 1px black", borderRadius: "45%" } const styles2 = { color: "lightpink", textShadow: "-1px 1px 2px #000000,1px 1px 2px #000000,-1px 1px 2px #000000,-1px -1px 2px #000000" }
return ( <div style={styles1}><div style={styles2}>01</div></div> ) }
ReactDOM.render(<App />, document.getElementById("root"))
... THEY ARE SIMILAR .... BUT NOT THE SAME (on my browser) (Font particularly looks diff, but also I had to change paddingLeft, width & height to make them more similar as noted above!)
Why do these render differently? Is this a bug in scrimba or some fundamental difference between REACT JS & regular HTML?

November 28, 2019 at 11:51am
Hopefully can pop in soon to help with this issue.
  • reply
  • like