Comments (3)
Yaaaaaas 🙌🏼 I came here for this and am happy to see it already exists.
I had two buttons and an anchor in a grid, under a textarea. It looked so silly because the one anchor had such a larger height. I had to use an anchor because I wanted to make use of target=_blank
.
To work around this, I needed up converting it to a button and using onlick=window.open...
Reading the explanation here, I think it makes sense – but like @pachacamac said adding it to the docs to explain it would give that reasoning before trying to fight with it.
from pico.
Hi @pachacamac,
TL;DR: It's a feature, not a bug.
Actually both <button>
and <a>
are inline
elements.
As both can be inside a <p>
, we should not really define a margin-bottom
.
But Pico is sometimes slightly opinionated 🙂.
I considered that:
- Links are most likely inside a
<p>
and don't need to have a margin. - Buttons are most likely outside of a
<p>
and therefore need amargin-bottom
in the context of a form.
I'm open to suggestions.
from pico.
Hey @lucaslarroche,
Thanks for the explanation. Even though personally I would probably still prefer no difference, it makes sense from that point of view.
I would just add it to the docs because there it sounds like they're 100% interchangeable:
Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.
from pico.
Related Issues (20)
- Using $parent-selector variable doesn't fully restrict styles to specified selector. HOT 1
- aria-invalid with grouped input
- Invalid HTML5 HOT 1
- Helper texts are incompatible with groups
- textarea after button spacing
- `code` tag should keep whitespace HOT 4
- Nav example horizontal scroll HOT 2
- Remove margin-bottom on last child HOT 1
- Dialog background color inconsistent HOT 1
- Nav item link role="button" is margined negatively HOT 1
- Color 'azure' missing from CDN HOT 3
- Nav item show garbled text when using local CSS
- Outline shows when input type="search" is grouped with button HOT 1
- Setting to control the creation of dark/light mode CSS
- Deprecation warnings with Sass 1.77.8 HOT 2
- Excess example on the nav documentation
- no styling possible under svelte HOT 1
- input type=file styled differently than other input elements / buttons
- RTL not working with new "group"
- >=100% CPU load if aria-busy=true animation in dialog
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pico.