删除HTML中按钮之间的空格，CSS

我想删除按钮之间的空格，例如，当我将鼠标悬停在NORMAL按钮上时，它与HARD按钮之间没有空格。我该怎么做，这些空白空间从哪里来？删除HTML中按钮之间的空格，CSS

body { 
 
    margin: 0; 
 
} 
 
#stripe { 
 
    background-color: white; 
 
    text-align: center; 
 
    height: 50px; 
 
    color: black; 
 
} 
 

 
button { 
 
    border: none; 
 
    background: none; 
 
    text-transform: uppercase; 
 
    height: 100%; 
 
    font-weight: 700; 
 
    color: black; 
 
    letter-spacing: 1px; 
 
    font-size: inherit; 
 
    transition: all 0.3s; 
 
    outline: none; 
 
} 
 

 
button:hover { 
 
    color: white; 
 
    background: black; 
 
} 
 

 
.selected { 
 
    color: white; 
 
    background: black; 
 
}

<div id="stripe"> 
 
    <button class="mode">Easy</button> 
 
    <button class="mode">Normal</button> 
 
    <button class="mode selected">Hard</button> 
 
</div>

来源

2017-04-15 Huy Tran

要么删除空格和回车，或者把它们之间的HTML注释。

body { 
 
    margin: 0; 
 
} 
 
#stripe { 
 
    background-color: white; 
 
    text-align: center; 
 
    height: 50px; 
 
    color: black; 
 
} 
 

 
button { 
 
    border: none; 
 
    background: none; 
 
    text-transform: uppercase; 
 
    height: 100%; 
 
    font-weight: 700; 
 
    color: black; 
 
    letter-spacing: 1px; 
 
    font-size: inherit; 
 
    transition: all 0.3s; 
 
    outline: none; 
 
} 
 

 
button:hover { 
 
    color: white; 
 
    background: black; 
 
} 
 

 
.selected { 
 
    color: white; 
 
    background: black; 
 
}

<div id="stripe"> 
 
    <button class="mode">Easy</button><!-- 
 
    --><button class="mode">Normal</button><!-- 
 
    --><button class="mode selected">Hard</button> 
 
</div>

来源

2017-04-15 22:27:53

回车如何在这些空白处返回结果？ –

@HuyTran它是一个空格字符，并且元素是“内联块”，因此它们以内联方式显示。就像你会在HTML中或''标签之间看到'这些单词之间的空格'，或者在单词/跨度之间有回车符的地方，你会看到元素之间的空格/返回值设置为'inline'和'内联块' –

-1

默认情况下，一些propirties设置（补白，边距，字体..）尝试加入雅虎CSS复位文件像一个正常的css文件

/* 
 
Copyright (c) 2010, Yahoo! Inc. All rights reserved. 
 
Code licensed under the BSD License: 
 
http://developer.yahoo.com/yui/license.html 
 
version: 3.1.0 
 
build: 2026 
 
*/ 
 
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

你可以用

* {padding：0px; margin：0px;}

来源

2017-04-15 22:41:49 ProgrammerToBe

它不起作用。它所做的只是从按钮中删除填充和边距。空格实际上是一个回车的结果，当元素被设置为**内联**或**内联块**时，该空格显示为空白。 –

浏览器总是在一些元素（包括按钮）之间添加空格。要删除这些，你需要为他们的父容器设置font-size为零。然后，要恢复按钮内的文本大小，请为它们设置字体大小。

#stripe { 
    font-size: 0; 
} 

button { 
    font-size: 14px; // Set font size that you need here 
}

来源

2017-04-16 02:09:57 ozma

删除HTML中按钮之间的空格，CSS

回答

相关问题