How to use "margin" with React

JavaScript
1

Hello,
A litle problem with margin in my code this syntaxes doesn’t works:

margin: "40px" "40px" "40px" auto,

margin: 40 40 40 auto,

with line style.

2

You’re going to have to give more information. How are you using this? A CSS file? An inline style? If it is the latter, it would have to be a valid JS object, which neither of those is. I would expect the value to be one long string.

1 Like
3 
class Text extends React.Component {
  render() {
    return (
      <div
        id="text"
        style={{
          backgroundColor: 'blueviolet',
          textAlign: 'center',
          margin: 40 40 40 auto,
        }}
      >
        {this.props.quote}
      </div>
4

like this

margin: "40 40 40 auto",
5

Yes, that has to be a valid JS object. It is JS code. I would expect something like: margin: '40 40 40 auto',

6

ok thank you Kevin :wink:

7

that not work.
When I use paddingBottom or top … that’s work but not with padding: “40 40 40 40”,
https://codepen.io/ALL9000/pen/dyJXazG

8

That is not a working pen.

I don’t know, I mostly do React Native which has slightly different CSS. I can help, but I’d need a working pen.

10

I save it. That’s should be works.

11

I just created a simple React app - when you’re having trouble, simplify:

I was able to get this to work:

      <div>
        <div
          style={{
            border: '1px solid red',
            margin: '10px 50px 100px 200px'
          }}
        >
          <span>howdy</span>
        </div>
        
                <div
          style={{
            border: '1px solid green',
            margin: '10px auto',
            width: '300px',
          }}
        >
          <span>doody</span>
        </div>
      </div>

You can see it work here.

12

yes that’s work now thanks Kevin :face_with_thermometer:

13

and why twitter button works well with my vscode and not with codepen?

14

I don’t know, I can’t compare both. But you were trying to import a style file before so I’m guessing you lost some of your styling. You’ll have to add that into the style pane.

15

there had nothing in the css file

16

it prevents me from validating the exercise

17

image

18

OK, be a developer… See if you can figure it out. Do some research, google some things, try some things. Don’t make asking someone to fix it for you your default response.

19

I haded "target=‘blank’ for tumblr link and that work but not for twitter…

20

Apparently it was a known issue.
https://github.com/freeCodeCamp/testable-projects-fcc/pull/1248
In addition the solution is given at the bottom of the exercise page. :innocent: :partying_face:
However, I forwarded the link to someone else who told me it worked. it’s strange.

The test is passed :partying_face: :partying_face: :partying_face: :partying_face:

21

It is because the pen runs inside an iframe.

If you use the twitter button from the Debug view it will work with target='_blank' (View button > Debug mode).

1 Like