如何在没有填充的情况下，从文本到顶部添加垂直和水平空间？</h1> </header> <div class="entry-content"> <div class="begin-single-meta begin-single-meta-c"><span class="meta-author"><span class="meta-author-avatar load"><img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /></span><div class="meta-author-box"> <div class="arrow-up"></div> <a href="https://go.coder-hub.com/author/huangapple" rel="author"> <div class="meta-author-inf load revery-bg"> <div class="meta-inf-avatar"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </div> <div class="meta-inf-name">huangapple</div> <div class="meta-inf meta-inf-posts"><span>117266</span><br />文章</div> <div class="meta-inf meta-inf-comment"><span>0</span><br />评论</div> <div class="clear"></div> </div> </a> <div class="clear"></div> </div> </span><span class="single-meta-area"><span class="meta-date"><time datetime="2023-08-05 00:29:25">2023年8月5日 00:29:25</time></span><span class="meta-cat"><a href="https://go.coder-hub.com/category/go" rel="category tag">go</a></span><span class="comment"><a href="https://go.coder-hub.com/76837724.html#respond"><i class="be be-speechbubble ri"></i><span class="comment-qa"></span><em>评论</em></a></span><span class="views"><i class="be be-eye ri"></i>114</span><span class="word-time"></span><span class="reading-open">阅读模式</span></span></div><span class="reading-close"><i class="be be-cross"></i></span><span class="s-hide" title="侧边栏"><span class="off-side"></span></span> <div class="single-content"> <details> <summary>英文:</summary> <p>How to add vertical and horizontal space from text to top of <textarea> without padding?<br /> </details> <h1 id="heading">问题</h1> <p>通常情况下，您只需使用填充(padding)来实现这一点，但我有一些需要尺寸信息的 JavaScript 代码，这将需要我进行大量的像素精确调整，尤其是如果我计划多次使用该 JavaScript。</p> <p>水平间距有一个 <code>[text-indent][1]</code> 属性，但它仅适用于第一行。</p> <p><strong>目前的情况：</strong><br /> <a href="https://i.stack.imgur.com/cKQ3p.png" data-fancybox="gallery"><img alt="如何在没有填充的情况下，从文本到<textarea>顶部添加垂直和水平空间？" decoding="async" src="https://i.stack.imgur.com/cKQ3p.png" alt="点击这里输入图像描述" /></a></p> <p><strong>大致我所需的：</strong><br /> <a href="https://i.stack.imgur.com/q1nCp.png" data-fancybox="gallery"><img alt="如何在没有填充的情况下，从文本到<textarea>顶部添加垂直和水平空间？" decoding="async" src="https://i.stack.imgur.com/q1nCp.png" alt="点击这里输入图像描述" /></a></p> <details> <summary>英文:</summary> <p>Normally you'd just use padding for this but I have some js that requires the dimensions and that would require me to do a lot of pixel-perfecting especially if I'm planning to use that js multiple times.</p> <p>There's a <code>[text-indent][1]</code> property for horizontal spacing but it only works for the first line</p> <p><strong>What it is right now:</strong><br /> <a href="https://i.stack.imgur.com/cKQ3p.png" data-fancybox="gallery"><img alt="如何在没有填充的情况下，从文本到<textarea>顶部添加垂直和水平空间？" decoding="async" src="https://i.stack.imgur.com/cKQ3p.png" alt="enter image description here" /></a></p> <p><strong>Roughly what I need:</strong><br /> <a href="https://i.stack.imgur.com/q1nCp.png" data-fancybox="gallery"><img alt="如何在没有填充的情况下，从文本到<textarea>顶部添加垂直和水平空间？" decoding="async" src="https://i.stack.imgur.com/q1nCp.png" alt="enter image description here" /></a></p> </details> <h1 id="1">答案1</h1> <p><strong>得分</strong>: 1</p> <p><Grid sx={{ display: 'flex', marginLeft:1,}}> <Typography>text here</Typography></Grid></p> <p>你也可以在CSS文件中这样做。</p> <details> <summary>英文:</summary> <p>Assuming you have a Grid component for example, and inside is a Typography component then you could do this</p> <pre><code><Grid sx={{ display: 'flex', marginLeft:1,}}> <Typography>text here</Typography></Grid> </code></pre> <p>You can as well do this in a css file.</p> </details> </p> </div> <div class="copyright-post betip" > <div class="be-nav-l"> <div class="be-nav-logo"> <div class="logo-site"> <div class="site-name-main"> <p class="site-description">通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。</p> </div> </div> </div> </div> </div> <div class="clear"></div> <div class="turn-small"></div> <div class="sharing-box betip" data-aos="zoom-in"> <a class="be-btn-beshare be-btn-donate use-beshare-donate-btn" rel="external nofollow" data-hover="打赏"><div class="arrow-share"></div></a> <a class="be-btn-beshare be-btn-like use-beshare-like-btn" data-count="0" rel="external nofollow"> <span class="sharetip bz like-number"> 点赞 </span> <div class="triangle-down"></div> </a> <a class="be-btn-beshare be-btn-share use-beshare-social-btn" rel="external nofollow" data-hover="分享"><div class="arrow-share"></div></a> <span class="post-link">https://go.coder-hub.com/76837724.html</span> <a class="tooltip be-btn-beshare be-btn-link be-btn-link-b use-beshare-link-btn" rel="external nofollow" onclick="myFunction()" onmouseout="outFunc()"><span class="sharetip bz copytip">复制链接</span></a> <a class="tooltip be-btn-beshare be-btn-link be-btn-link-l use-beshare-link-btn" rel="external nofollow" onclick="myFunction()" onmouseout="outFunc()"><span class="sharetip bz copytipl">复制链接</span></a> <a class="be-btn-beshare be-share-poster use-beshare-poster-btn" rel="external nofollow" data-hover="海报"><div class="arrow-share"></div></a> </div> <div class="content-empty"></div> <footer class="single-footer"> <div class="single-cat-tag dah"><div class="single-cat dah"><i class="be be-sort"></i><a href="https://go.coder-hub.com/category/go" rel="category tag">go</a></div></div> </footer> <div class="clear"></div> </div> </article> <div class="authorbio ms load betip" data-aos=fade-up> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> <ul class="spostinfo"> <li>本文由 <strong><a href="https://go.coder-hub.com/author/huangapple" title="文章作者 huangapple" rel="author">huangapple</a></strong> 发表于 2023年8月5日 00:29:25</li> <li class="reprinted"><strong>转载请务必保留本文链接：</strong>https://go.coder-hub.com/76837724.html</li> </ul> <div class="clear"></div> </div> <div class="single-code-tag betip"> <div class='clear'></div> <div class="apc-ajax-post-item-wrap ajax-cat-post-wrap" data-more="more" data-apc-ajax-post-item='{"show_filter":"yes","btn":"yes","btn_all":"no","initial":"-1","layout":"1","post_type":"post","posts_per_page":"4","cat":"1212,1080,2223,835,4102","terms":"","paginate":"no","hide_empty":"true","orderby":"rand","order":"DESC","meta_key":"","more":"more","mid":"","style":"photo","listimg":"","column":"4","infinite":"","animation":"","item_id":"","slider":"","tags":"tag","special":"","prev_next":"true","img":"","sticky":"","children":"true"}'> <div class="acx-filter-div" data-layout="1"> <ul> <li class="bea-texonomy ms apc-cat-btu" data_id="1212" data-aos=fade-up>css</li> <li class="bea-texonomy ms apc-cat-btu" data_id="1080" data-aos=fade-up>html</li> <li class="bea-texonomy ms apc-cat-btu" data_id="2223" data-aos=fade-up>input</li> <li class="bea-texonomy ms apc-cat-btu" data_id="835" data-aos=fade-up>javascript</li> <li class="bea-texonomy ms apc-cat-btu" data_id="4102" data-aos=fade-up>textarea</li> </ul> </div> <div class="acx-ajax-container"> <div class="acx-loader"> <div class="dual-ring"></div> </div> <div class="beall-filter-result"> <div class="apc-postitem-wrapper"> <section class="picture-area content-area grid-cat-4"> <div class="apc-post-item apc_layout_1 "> <article id="post-160903" class="post-item-list post picture scl" data-aos="zoom-in" > <div class="picture-box sup"> <figure class="picture-img gdz"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/75366151.html" data-src="https://cdn.coder-hub.com/wp/img/9.jpg"></a></div> </figure> <h2 class="grid-title gdz"><a href="https://go.coder-hub.com/75366151.html" rel="bookmark">Javascript Generator Function Jest Testing Yielding Same Yield</a></h2> <span class="grid-inf gdz"> <span class="grid-author"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author grid-meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span> <span class="g-cat"><a href="https://go.coder-hub.com/category/go">go</a></span> <span class="grid-inf-l"> <span class="views"><i class="be be-eye ri"></i>102</span> <span class="date"><time datetime="2023-02-07 04:18:01">02/07</time></span> </span> </span> <div class="clear"></div> </div> </article> <article id="post-144918" class="post-item-list post picture scl" data-aos="zoom-in" > <div class="picture-box sup"> <figure class="picture-img gdz"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/75793566.html" data-src="https://cdn.coder-hub.com/wp/img/10.jpg"></a></div> </figure> <h2 class="grid-title gdz"><a href="https://go.coder-hub.com/75793566.html" rel="bookmark">Adding items to wishlist</a></h2> <span class="grid-inf gdz"> <span class="grid-author"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author grid-meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span> <span class="g-cat"><a href="https://go.coder-hub.com/category/go">go</a></span> <span class="grid-inf-l"> <span class="views"><i class="be be-eye ri"></i>96</span> <span class="date"><time datetime="2023-03-21 01:41:06">03/21</time></span> </span> </span> <div class="clear"></div> </div> </article> <article id="post-102497" class="post-item-list post picture scl" data-aos="zoom-in" > <div class="picture-box sup"> <figure class="picture-img gdz"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76861644.html" data-src="https://cdn.coder-hub.com/wp/img/9.jpg"></a></div> </figure> <h2 class="grid-title gdz"><a href="https://go.coder-hub.com/76861644.html" rel="bookmark">在Angular 16中使用NPM的ng-circle-progress组件的方法是什么？</a></h2> <span class="grid-inf gdz"> <span class="grid-author"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author grid-meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span> <span class="g-cat"><a href="https://go.coder-hub.com/category/go">go</a></span> <span class="grid-inf-l"> <span class="views"><i class="be be-eye ri"></i>129</span> <span class="date"><time datetime="2023-08-09 00:48:07">08/09</time></span> </span> </span> <div class="clear"></div> </div> </article> <article id="post-92405" class="post-item-list post picture scl" data-aos="zoom-in" > <div class="picture-box sup"> <figure class="picture-img gdz"> <div class="thumbs-b lazy"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/59610849.html" data-src="https://cdn.coder-hub.com/wp/img/23.jpg"></a></div> </figure> <h2 class="grid-title gdz"><a href="https://go.coder-hub.com/59610849.html" rel="bookmark">如何在Angular 7中使用POST API将表单数据发送到服务器。</a></h2> <span class="grid-inf gdz"> <span class="grid-author"><a href="https://go.coder-hub.com/author/huangapple" rel="author"> <span class="meta-author grid-meta-author"> <span class="meta-author-avatar load"> <img class="avatar photo" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" alt="huangapple" width="96" height="96" data-original="https://go.coder-hub.com/wp-content/uploads/2023/08/1_avatar-96x96.png" /> </span> </span> </a> </span> <span class="g-cat"><a href="https://go.coder-hub.com/category/go">go</a></span> <span class="grid-inf-l"> <span class="views"><i class="be be-eye ri"></i>106</span> <span class="date"><time datetime="2020-01-06 18:57:22">01/06</time></span> </span> </span> <div class="clear"></div> </div> </article> </div> <div class="clear"></div> <div class="apc-posts-navigation" data-aos="zoom-in" > <div class='clear ajax-navigation'></div><div data-paged='1' data-next='2' class=' apc-post-item-load-more'><span class='apc-load-more'><i class='be be-more'></i></span></div> <div class='clear'></div> </div> </section> </div> </div> </div> </div> </div> <div class="slider-rolling-box ms betip" data-aos=fade-up> <div id="slider-rolling" class="owl-carousel be-rolling single-rolling"> <div id="post-104802" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881483.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/24.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881483.html" target="_blank" rel="bookmark">What's the correct way to type hint an empty list as a literal in python?</a></h2> <div class="clear"></div> </div> <div id="post-104801" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881482.html" style="background-image: url(https://i.stack.imgur.com/qaeHV.png);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881482.html" target="_blank" rel="bookmark">如何在Highcharts Gantt中更改本地化的星期名称</a></h2> <div class="clear"></div> </div> <div id="post-104797" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881472.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/17.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881472.html" target="_blank" rel="bookmark">如何在同一个流中使用多个过滤器和映射函数？</a></h2> <div class="clear"></div> </div> <div id="post-104794" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881464.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/10.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881464.html" target="_blank" rel="bookmark">如何使用Map/Set来将代码优化到O(n)？</a></h2> <div class="clear"></div> </div> <div id="post-104788" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881458.html" style="background-image: url(https://go.coder-hub.com/wp-content/themes/begin/img/default/random/320.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881458.html" target="_blank" rel="bookmark">.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。</a></h2> <div class="clear"></div> </div> <div id="post-104782" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881430.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/1.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881430.html" target="_blank" rel="bookmark">如何在Playwright视觉比较中屏蔽多个定位器？</a></h2> <div class="clear"></div> </div> <div id="post-104777" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881423.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/1.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881423.html" target="_blank" rel="bookmark">在C++中，可以使用可变模板参数来检索类型的内部类型。</a></h2> <div class="clear"></div> </div> <div id="post-104775" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881422.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/16.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881422.html" target="_blank" rel="bookmark">selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found</a></h2> <div class="clear"></div> </div> <div id="post-104768" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76881370.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/26.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76881370.html" target="_blank" rel="bookmark">Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)</a></h2> <div class="clear"></div> </div> <div id="post-104316" class="post-item-list post scrolling-img"> <div class="scrolling-thumbnail"><div class="thumbs-sg"><a class="thumbs-back sc" rel="external nofollow" href="https://go.coder-hub.com/76879368.html" style="background-image: url(https://cdn.coder-hub.com/wp/img/6.jpg);"></a></div></div> <div class="clear"></div> <h2 class="grid-title over"><a href="https://go.coder-hub.com/76879368.html" target="_blank" rel="bookmark">AG Grid 在上下文菜单中以大文本形式打开</a></h2> <div class="clear"></div> </div> </div> </div> <!-- 引用 --> <div id="comments" class="comments-area"> <div class="scroll-comments"></div> <div id="respond" class="comment-respond ms" data-aos=fade-up> <form action="https://go.coder-hub.com/wp-comments-post.php" method="post" id="commentform"> <div class="comment-user-inf"> <div class="user-avatar load"> <img alt="匿名" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-original="https://go.coder-hub.com/wp-content/themes/begin/img/favicon.png"> </div> <div class="comment-user-inc"> <h3 id="reply-title" class="comment-reply-title"><span>发表评论</span></h3> <span class="comment-user-name">匿名网友</span> <span class="comment-user-alter"></span> </div> </div> <div class="gravatar-apply"> <a href="https://weavatar.com/" rel="external nofollow" target="_blank" title="申请头像"></a> </div> <div class="comment-form-comment"> <textarea id="comment" class="dah" name="comment" rows="4" tabindex="30" placeholder="赠人玫瑰，手留余香..." onfocus="this.placeholder=''" onblur="this.placeholder='赠人玫瑰，手留余香...'"> 确定
