无法使用CSS删除标签之间的间距

Question

我一直在努力删除以下标签之间的空格。我尝试过编辑填充和白色间距中的所有内容，但仍然无法弄清楚是什么原因导致顶部标签之间出现空白

https://codepen.io/appelledesign/pen/mjzrjY

08-07 23:53:02.980 990-990/com.example.ekene.blogzone D/ViewRootImpl@23bca1a[SettingsActivity]: ViewPostIme pointer 0
08-07 23:53:03.032 990-990/com.example.ekene.blogzone D/ViewRootImpl@23bca1a[SettingsActivity]: ViewPostIme pointer 1
08-07 23:53:03.053 990-1029/com.example.ekene.blogzone V/FA: Recording user engagement, ms: 7132
08-07 23:53:03.054 990-1029/com.example.ekene.blogzone V/FA: Connecting to remote service
08-07 23:53:03.059 990-1029/com.example.ekene.blogzone V/FA: Activity paused, time: 85858553
08-07 23:53:03.061 990-1029/com.example.ekene.blogzone D/FA: Logging event (FE): user_engagement(_e), Bundle[{firebase_event_origin(_o)=auto, engagement_time_msec(_et)=7132, firebase_screen_class(_sc)=SettingsActivity, firebase_screen_id(_si)=779955923523228885}]
08-07 23:53:03.074 990-990/com.example.ekene.blogzone V/FA: onActivityCreated
08-07 23:53:03.074 990-1029/com.example.ekene.blogzone V/FA: Connection attempt already in progress
08-07 23:53:03.222 990-1029/com.example.ekene.blogzone V/FA: Connection attempt already in progress
08-07 23:53:03.223 990-1029/com.example.ekene.blogzone V/FA: Activity resumed, time: 85858723
08-07 23:53:03.226 990-1029/com.example.ekene.blogzone D/FA: Logging event (FE): screen_view(_vs), Bundle[{firebase_event_origin(_o)=auto, firebase_previous_class(_pc)=SettingsActivity, firebase_previous_id(_pi)=779955923523228885, firebase_screen_class(_sc)=Profile, firebase_screen_id(_si)=779955923523228886}]
08-07 23:53:03.230 990-990/com.example.ekene.blogzone D/ViewRootImpl@799292b[Profile]: setView = DecorView@a88d746[Profile] TM=true MM=false
08-07 23:53:03.231 990-990/com.example.ekene.blogzone D/ViewRootImpl@23bca1a[SettingsActivity]: MSG_WINDOW_FOCUS_CHANGED 0
08-07 23:53:03.237 990-1029/com.example.ekene.blogzone V/FA: Connection attempt already in progress
08-07 23:53:03.241 990-990/com.example.ekene.blogzone D/ViewRootImpl@799292b[Profile]: dispatchAttachedToWindow
08-07 23:53:03.253 990-990/com.example.ekene.blogzone V/Surface: sf_framedrop debug : 0x4f4c, game : false, logging : 0
08-07 23:53:03.254 990-990/com.example.ekene.blogzone D/ViewRootImpl@799292b[Profile]: Relayout returned: old=[0,0][0,0] new=[0,0][1440,2960] result=0x7 surface={valid=true 503392329728} changed=true
08-07 23:53:03.265 990-1103/com.example.ekene.blogzone D/mali_winsys: EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, egl_color_buffer_format *, EGLBoolean) returns 0x3000,  [1440x2960]-format:1
08-07 23:53:03.265 990-1103/com.example.ekene.blogzone D/OpenGLRenderer: eglCreateWindowSurface = 0x755a21ee00
08-07 23:53:03.270 990-1029/com.example.ekene.blogzone D/FA: Connected to remote service
08-07 23:53:03.270 990-1029/com.example.ekene.blogzone V/FA: Processing queued up service tasks: 4
08-07 23:53:03.273 990-990/com.example.ekene.blogzone D/ViewRootImpl@799292b[Profile]: MSG_RESIZED_REPORT: frame=Rect(0, 0 - 1440, 2960) ci=Rect(0, 84 - 0, 168) vi=Rect(0, 84 - 0, 168) or=1
    MSG_WINDOW_FOCUS_CHANGED 1
08-07 23:53:03.275 990-990/com.example.ekene.blogzone V/InputMethodManager: Starting input: tba=android.view.inputmethod.EditorInfo@509c45d nm : com.example.ekene.blogzone ic=null
08-07 23:53:03.275 990-990/com.example.ekene.blogzone I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus
08-07 23:53:03.341 990-1103/com.example.ekene.blogzone D/OpenGLRenderer: eglDestroySurface = 0x751db50540
08-07 23:53:03.352 990-990/com.example.ekene.blogzone D/ViewRootImpl@23bca1a[SettingsActivity]: Relayout returned: old=[0,0][1440,2960] new=[0,0][1440,2960] result=0x5 surface={valid=false 0} changed=true

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #555;
  background: #eee;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}

main {
  max-width: 800px;
  margin: 0 auto;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
  display: inline-block;
  /* margin: 0 0 -1px;
         */
  font-weight: 600;
  text-align: center;
  color: #bbb;
  /* border: 1px solid transparent;
         */
  padding-top: 30px;
  padding-bottom: 30px;
  width: 33.01%;
  background: orange;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='1']:before {
  content: '\f1cb';
}

label[for*='2']:before {
  content: '\f17d';
}

label[for*='3']:before {
  content: '\f16b';
}

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked+label {
  color: #ffffff;
  /* border: 1px solid #ddd;
         */
  /* border-top: 2px solid #ea8424;
         */
  /* border-bottom: 1px solid #fff;
         */
  background: #07a68f;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
    display: flex;
    display: -webkit-box;
  }
  label:before {
    margin: 0;
    font-size: 18px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}

Answer 1

将所有标签/输入代码替换为：

<input id="tab1" type="radio" name="tabs" checked><label for="tab1">Small Business</label><input id="tab2" type="radio" name="tabs"><label for="tab2">Medium Business</label><input id="tab3" type="radio" name="tabs"><label for="tab3">Large Business</label>

这看起来很糟糕，但是您无需找出CSS解决方法。从长远来看，加减缩材料是一种好习惯。

Answer 2

请在全屏屏幕上检查它，我没有检查响应。仅解决了间距问题。

在标签中，我使用了display: table-cell;而不是display : inline-block

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #555;
  background: #eee;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}

main {
  max-width: 800px;

  margin: 0 auto;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
  color : #fff!Important;
  padding : 26px 35px;
    display: table-cell;
    /* margin: 0 0 -1px; */
    font-weight: 600;
    text-align: center;
    color: #bbb;
    /* border: 1px solid transparent; */
    padding-top: 30px;
    padding-bottom: 30px;
    width: 33.01%;
    background: orange;
  
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
  
}

label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16b'; }


label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
    color: #ffffff;
    /* border: 1px solid #ddd; */
    /* border-top: 2px solid #ea8424; */
    /* border-bottom: 1px solid #fff; */
    background: #07a68f;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3
 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
        display: flex;
    display: -webkit-box;
  }
  label:before {
    margin: 0;
    font-size: 18px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
  }

<html>
<main>
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Small Business</label>
   <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Medium Business</label>
      <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Large Business</label>
    
  <section id="content1">
    <p>
      TEST
    </p>
    <p>
      Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
  </section>
    
  <section id="content2">
    <p>
      Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
    </p>
    <p>
      Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
  </section>
    
  <section id="content3">
    <p>
      Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </p>
    <p>
      Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
  </section>
    
  </section>
    
</main>
</html>

Answer 3

使用显示：在您的flex中设置大于650px的断点；对于最小的显示：块，然后将宽度更改33.33％

全屏预览

TypedActionHandler

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
}

body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #555;
  background: #eee;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}

main {
  max-width: 800px;

  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
    display: inline-block;
    /* margin: 0 0 -1px; */
    font-weight: 600;
    text-align: center;
    color: #bbb;
    /* border: 1px solid transparent; */
    padding-top: 30px;
    padding-bottom: 30px;
    width: 33.33%;
    background: orange;
  
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
  
}

label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16b'; }


label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
    color: #ffffff;
    /* border: 1px solid #ddd; */
    /* border-top: 2px solid #ea8424; */
    /* border-bottom: 1px solid #fff; */
    background: #07a68f;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3
 {
  display: block;
}

@media screen and (max-width: 650px) {
  main {
    display: block;
  }
  label {
        display: flex;
    display: -webkit-box;
  }
  label:before {
    margin: 0;
    font-size: 18px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
  }