无法从框中删除边距

时间：2017-12-10 11:12:42

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

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

＆＃13;
＆＃13; 
.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*/;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我尝试过使用！important函数，但它似乎无法正常工作。

What it should look like

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

5 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
.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*/;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

将display:inline-block;用于numberedTitle班级：

＆＃13;
＆＃13; 
.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*/;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

添加display: inline-block;到.numberedTitle，无需设置保证金。

设置内联块，将使div作为内联html标记，但也保留块元素的维度属性（如宽度，高度）。

＆＃13;
＆＃13; 
.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*/;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

显示此margin是因为它是默认的div行为，这意味着即使您为宽度指定了值，它也会充当块。

所以你可以使用bootstrap内置类（即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 :(得分：0)

只需添加display：inline-block;你的.numberedTitle 

. numberedTitle {
display: inline-block;
}
相关问题
最新问题