刪除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

回答

相關問題