Padding / Margin absolutely no affect
See original GitHub issuethis 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:
- Created 8 years ago
- Reactions:2
- Comments:7 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Text
components have slightly limited styling support compared toView
, so if you want more power I’d suggest wrapping it with aView
.For fixed width, I’d set a
width
on the icon and applytextAlign: 'center'
. If you’re using this in many places you can make a composition component out of it.good point. I dont need to use the Button. Thanks