无法从框中删除边距

Question

我想并排放置 2 个 div，但其中一个 div 的边距我无法删除。

.middleHolder{
 padding: 0px !important;
}

body{
 font-family: Raleway, sans-serif;
}

.numberedTitle{
 font-family: Roboto, sans-serif;
 font-size: 62px;
 padding-left: 15px;
 margin: 0 !important;
 width: 100px;
}

.subtitleHolder{
 display: inline-block;
}

p{
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 17px !important;
 font-weight: 300;
 color: /*#888*/;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

我试过使用 !important 函数，但它似乎不起作用。

我还删除了 numberedTitle 和 subtitleHolder 上的 col-md-12，但这并没有改变任何东西。

Answer 1

它们没有并排放置并不是因为你的边距。这是因为 div 与 span 不同 not an inline component，因此默认情况下每个 div 都会在新行中生成。要让它们并排对齐，您只需将 float:left 添加到 div，如图 below.Hope，这很有帮助。

.middleHolder{
 padding: 0px !important;
}

body{
 font-family: Raleway, sans-serif;
}

.numberedTitle{
 font-family: Roboto, sans-serif;
 font-size: 62px;
 padding-left: 15px;
 float:left;
 width: 100px;
}

.subtitleHolder{
 display: inline-block;
}

p{
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 17px !important;
 font-weight: 300;
 color: /*#888*/;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

Answer 2

使用 display:inline-block; 到您的 numberedTitle class:

.middleHolder{
 padding: 0px !important;
}

body{
 font-family: Raleway, sans-serif;
}

.numberedTitle{
 font-family: Roboto, sans-serif;
 font-size: 62px;
 padding-left: 15px;
 margin: 0 !important;
 width: 100px;
  display:inline-block;
}

.subtitleHolder{
 display: inline-block;
}

p{
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 17px !important;
 font-weight: 300;
 color: /*#888*/;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

Answer 3

此 margin 出现是因为它是默认的 div 行为，这意味着即使您为宽度.

因此您可以使用 bootstrap 内置 class（即 class="pull-left"）来使元素浮动到左侧，这应该可以解决您的问题。

.middleHolder{
 padding: 0px !important;
}

body{
 font-family: Raleway, sans-serif;
}

.numberedTitle{
 font-family: Roboto, sans-serif;
 font-size: 62px;
 padding-left: 15px;
 margin: 0 !important;
 width: 100px;
}

.subtitleHolder{
 display: inline-block;
}

p{
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 17px !important;
 font-weight: 300;
 color: /*#888*/;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle pull-left">
    <span>01</span>
  </div>
  <div class="subtitleHolder pull-left">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

或者，您可以将 display: inline-block 添加到 .numberedTitle。

.middleHolder{
 padding: 0px !important;
}

body{
 font-family: Raleway, sans-serif;
}

.numberedTitle{
 font-family: Roboto, sans-serif;
 font-size: 62px;
 padding-left: 15px;
 margin: 0 !important;
 width: 100px;
 display: inline-block;
}

.subtitleHolder{
 display: inline-block;
}

p{
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 17px !important;
 font-weight: 300;
 color: /*#888*/;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

Answer 4

只需添加display: inline-block；到您的.numberedTitle，无需设置保证金。

设置内联块，将使您 div 充当内联 html 标记，同时保留块元素的尺寸属性（如宽度、高度）。

.middleHolder{
 padding: 0px !important;
}

body{
 font-family: Raleway, sans-serif;
}

.numberedTitle{
 font-family: Roboto, sans-serif;
 font-size: 62px;
 padding-left: 15px;
 width: 100px;
  display: inline-block;
}

.subtitleHolder{
 display: inline-block;
}

p{
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 17px !important;
 font-weight: 300;
 color: /*#888*/;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

Answer 5

只需添加显示：内联块；到您的 .numberedTitle

. numberedTitle {
display: inline-block;
}

无法从框中删除边距

Cannot remove margin from box

html

css

margin

twitter-bootstrap

bootstrap-4