为什么我无法从顶部删除边距/填充

时间：2015-07-03 16:57:58

标签： html css

我无法从顶部删除填充或边距，我尝试设置主容器

margin-top:0px !important;
padding-top:0px !important;

但不行。

在此消息中代码很大，而且她在jsfiddle

http://jsfiddle.net/2jcgcfh4/

3 个答案:

答案 0 :(得分：1)

您可以通过执行以下操作删除元素上的css转换创建的空白：

.container .honeycomb {
  margin-top: -67px
}

答案 1 :(得分：0)

position: absolute使用top: -70px和.honeycomb。

enter image description here

＆＃13;
＆＃13; 
html,
body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  height: 350px;
  -webkit-perspective: 700px;
  perspective: 700px;
  z-index: 10;
  overflow: hidden;
}
.container .honeycomb {
  display: block;
  position: absolute;
  margin-left: -465px;
  padding-left: 18px;
  left: 50%;
  text-align: center;
  height: 338px;
  width: 930px;
  -ms-transform: rotateX(45deg) rotateY(0deg);
  -webkit-transform: rotateX(45deg) rotateY(0deg);
  transform: rotateX(45deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -ms-transform-origin: center 65%;
  -webkit-transform-origin: center 65%;
  transform-origin: center 65%;
  z-index: 5;
  top: -70px;
}
.container .honeycomb .column {
  display: block;
  float: left;
  width: 62px;
}
.container .honeycomb .column:nth-child(odd) {
  margin-top: 36px;
}
.container .honeycomb .hex {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  height: 72px;
  width: 62px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.container .honeycomb .hex:hover {
  opacity: 1;
  -ms-transform: translateZ(20px);
  -webkit-transform: translateZ(20px);
  transform: translateZ(20px);
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}
.container .honeycomb .hex:hover .content {
  filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -ms-transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
  -webkit-transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
  transform: rotateX(-90deg) translateZ(-40px) translateY(-50px);
}
.container .honeycomb .hex .wrapper {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.container .honeycomb .hex .wrapper .color-1 {
  background: #ffbc06;
}
.container .honeycomb .hex .wrapper .color-1:before {
  border-right-color: #ffbc06;
}
.container .honeycomb .hex .wrapper .color-1:after {
  border-left-color: #ffbc06;
}
.container .honeycomb .hex .content {
  display: block;
  position: absolute;
  top: 0;
  left: -80px;
  text-align: center;
  width: 200px;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transition: all 0.3s ease-out 0.1s;
  -o-transition: all 0.3s ease-out 0.1s;
  -webkit-transition: all 0.3s ease-out;
  -webkit-transition-delay: 0.1s;
  -webkit-transition: all 0.3s ease-out 0.1s;
  transition: all 0.3s ease-out 0.1s;
  -ms-transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
  -webkit-transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
  transform: rotateX(-90deg) translateZ(-40px) translateY(-40px);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}
.container .honeycomb .hex .content strong {
  display: block;
  font: 600 26px/1.1 verdana, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.8);
}
.container .honeycomb .hex .content small {
  display: block;
  font: 15px/1.1 verdana, sans-serif;
}
.container .honeycomb .shadows {
  display: block;
  position: absolute;
  top: -15%;
  left: -15%;
  height: 130%;
  width: 130%;
  background-image: -webkit-radial-gradient(closest-side, rgba(23, 29, 37, 0), #171d25);
  background-image: radial-gradient(closest-side, rgba(23, 29, 37, 0), #171d25);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9;
  -ms-transform: translateZ(10px);
  -webkit-transform: translateZ(10px);
  transform: translateZ(10px);
  pointer-events: none;
}
.hexagon {
  display: block;
  position: absolute;
  width: 36px;
  height: 62px;
  background-color: #ffffff;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: relative;
  float: left;
  border-top: 31px solid transparent;
  border-bottom: 31px solid transparent;
}
.hexagon:before {
  border-right: 18px solid #ffffff;
  left: -18px;
}
.hexagon:after {
  border-left: 18px solid #ffffff;
  right: -18px;
}
.hidden {
  display: none;
}
＆＃13; 
<div class="container">
  <div class="honeycomb">
    <div class="hexes-1 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-2 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-3 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-4 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-5 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-6 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-7 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-8 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-9 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-10 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-11 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-12 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-13 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-14 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="hexes-13 column">
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
      <a class="hex">
        <div class="wrapper">
          <div class="hexagon color-1"></div>
        </div>
        <span class="content"> <strong>Title Title</strong> <small>Subtitle Subittle</small> </span> 
      </a>
    </div>
    <div class="shadows"></div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

当你尝试0px并且它不能正常工作时，试试负数，就像Samuel刚刚说的那样-67px。但在设置此类边距或填充之前使用CSS RESET。它可以提供很多帮助，因为所有浏览器都没有以相同的方式设置空白大小。

解决方案：

USE CSS RESET 

/**
 * 1.0 - Reset
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}


a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

然后设置负边距（例如：-50px）直到得到你想要的东西。

这会在所有浏览器上提供相同的结果

相关问题
最新问题