question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Padding / Margin absolutely no affect

See original GitHub issue

this is the strangest issue I have seen yet.

I have tried this cases

                        <Icon name={"user"} size={18}>
                            <Text style={{padding: 15}}></Text> 
                        </Icon>
                        <Text >{'Home'}</Text>

and

                        <Icon name={"user"} size={18} style={{padding: 15}} />
                        <Text >{'Home'}</Text>

and

                        <Icon name={"user"} size={18} style={{padding: 15}}/>
                                                    <Text style={{padding: 15}}>{'Home'}</Text>
                                                </Icon>

and in every case… padding does absolutely nothing. Is anyone else trying this ? Im using FontAwesome… the other issue is fa-fw for a standard width for all icon widths… how is this to be done?

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:2
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
obladorcommented, Mar 21, 2016

Text components have slightly limited styling support compared to View, so if you want more power I’d suggest wrapping it with a View.

For fixed width, I’d set a width on the icon and apply textAlign: 'center'. If you’re using this in many places you can make a composition component out of it.

0reactions
jayesbecommented, Mar 21, 2016

good point. I dont need to use the Button. Thanks

Read more comments on GitHub >

github_iconTop Results From Across the Web

Absolute positioning ignoring padding of parent - Stack Overflow
Padding inherit on the position:absolute child element does indeed work if you're just looking for the child to respect the parent's padding.
Read more >
padding - CSS: Cascading Style Sheets - MDN Web Docs
Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.
Read more >
All You Need To Know About CSS Margin And Padding
Padding Is Affected By Background Color While Margin Is Not ; Margin Can Be Set To Auto While Padding Cannot; Padding Controls The...
Read more >
How to Set CSS Margins and Padding (And Cool Layout Tricks)
The padding applied on an element affects its size on the webpage. It does not affect the distance between different elements on a...
Read more >
Everything You Need To Know About CSS Margins
For example, a box completely empty of content will not collapse it's top and bottom margin if it has a border, or padding...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found