css - 填充不适用于使用 tachyons css 的输入

Question

我有以下布局：

<article class='pb5 bg-near-white'>
            <header class='tc ph4-ns pt4 pt5-ns'>
                <h1 class='tc blue'>Let's get started posting your question</h1>
            </header>
            <div class=''>
                <div class='pa4 bg-white measure db center f5 f4-ns lh-copy'>
                    <form class='center mt3 mb4 justify-around'>
                        <fieldset class='ba b--transparent'>
                            <div class='mt4'>
                                <label class='db mb2 b'>Title</label>
                                <input
                                    class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
                                    placeholder='title'
                                    onChange={handleTitleChange}
                                ></input>
                            </div>
                            <div class='mv4'>
                                <label class='db mb2 b'>Content</label>
                                <textarea
                                    class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
                                    placeholder='Content Here!'
                                    cols='50'
                                    rows='5'
                                    onChange={handleBodyChange}
                                ></textarea>
                            </div>
                            <a
                                class='tc f6 fw6 b link dim br2 ph3 pv3 mb2 dib white bg-blue w-100'
                                onClick={handlePostQuestion}
                            >
                                Submit
                            </a>
                        </fieldset>
                    </form>
                </div>
            </div>
        </article>

它使用 tachyons 内联 css 来创建基本的表单布局。但是，我最终得到以下用户界面：

填充似乎不适用于标题input字段，但确实适用于该textarea字段。当我将input标签更改为textarea标签时，填充适用，但问题是这似乎是一个临时修复。难道我做错了什么？

Answer 1

在输入元素上，添加类border-box或设置type="text"将使其行为符合您的预期。

原因是，Tachyons 没有给出所有输入元素的“边界框”框大小；在 docs中有更详细的解释。在源代码中也可见。