无法从框中删除边距答案

【问题标题】：Cannot remove margin from box无法从框中删除边距
【发布时间】：2018-05-24 02:36:41
【问题描述】：

我想并排放置 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，但这并没有改变任何东西。

【问题讨论】：

标签： html css twitter-bootstrap margin bootstrap-4

【解决方案1】：

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

.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>

【讨论】：

【解决方案2】：

将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>

【讨论】：

【解决方案3】：

出现此margin 是因为它是默认的 div 行为，这意味着即使您为 width 指定值，它也会充当块。

因此您可以使用引导程序内置类（即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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

只需添加 display: inline-block;到您的 .numberedTitle

. numberedTitle {
display: inline-block;
}

【讨论】：