Unable to eliminate the margin on the box

I am struggling to align 2 divs side by side due to a margin that one of the divs has, and I cannot remove it.

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

I have attempted to use the !important function to no avail.

https://i.sstatic.net/8CLya.jpg

I have also removed the col-md-12 from both numberedTitle and subtitleHolder, but unfortunately, it did not result in any changes.

htmlcsstwitter-bootstrapmarginbootstrap-4

Answer №1

Add display: inline-block; to the .numberedTitle class instead of setting margins.

Setting the display property to inline-block will make the div act as an inline HTML tag while retaining the dimension properties of block elements such as width and height.

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

The reason they aren't positioned side by side is not due to your margin, but because a div is not an inline component like span. By default, each div is displayed on a new line. To make them align side by side, you can simply add float:left to the div as shown below. Hopefully, this solution helps.

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

Apply the display:inline-block; property to your 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 №4

The presence of this margin is due to the default behavior of the div, causing it to behave as a block element even when a width value is specified.

To solve this issue, you can utilize the bootstrap built-in class (e.g., class="pull-left") to float the elements to the left side.

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

Alternatively, you can simply add display: inline-block to the .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 №5

To make your .numberedTitle have an inline block display, simply add the following code:

.numberedTitle {
display: inline-block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the default arrow icon in the expand/collapse navigation bar

I need help changing the downward arrow in the code below to a fontawesome icon. I'm unsure about how to: 1. Remove the default arrow on the right of the parent node. 2. Use "+/-" symbols to represent the collapse state. It seems that the onclick c ...

javascriptjquerycsshtmlbootstrap-4

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

htmlangular

Video is not visible in safari browser initially, but becomes visible only after scrolling for a little while

Having issues with a video not displaying correctly in Safari? The problem is that the video only becomes visible after scrolling the browser window. Want to see an example of this issue in action? Click here and select the red bag. Check out the code sni ...

javascriptjquerycss

Creating a CSS full-width navigation menu

Recently, I came across a menu code on the web that seemed great. However, I wanted to make my menu responsive and full width. Since I am new to CSS and HTML, adjusting the menu code has been a bit of a challenge for me. .menu, .menu ul { list-style: ...

javascripthtmlcss

Creating a line that extends from the left side of the viewport to the full length of an element within a bootstrap column

I'm currently working on creating a title that has a unique design: https://i.sstatic.net/VhEBQ.png The design requires a horizontal line to start from the left side of the viewport and end at the same point where the title ends. I am aiming to keep ...

htmlcssbootstrap-5

Personalize the bootstrap classes within Angular app development

I'm currently utilizing bootstrap 4 and sass within my angular 6 application development. My goal is to create a customized nav tab in my application by slightly modifying the bootstrap nav-tabs and nav-link classes. However, the changes I make to th ...

angularsassbootstrap-4angular-bootstrap

Condense everything when displaying one at a time (various divs)

I found the solution at https://getbootstrap.com/docs/4.2/components/collapse/ My query is related to collapsing multiple elements and showing only one when divided into different divs. While it works within the same div, dividing content into separate di ...

cssbootstrap-4accordion

Using the KnockOut js script tag does not result in proper application of data binding

Being new to knockout js, I found that the official documentation lacked a complete html file example. This led me to write my own script tags, which initially resulted in unexpected behavior of my html markups. Strangely enough, simply rearranging the pos ...

javascripthtmlknockout.js

What is the best way to apply a background image to a DIV element using CSS

The main aim is to change the background image of a DIV using AJAX. $.getJSON("https://itunes.apple.com/search?term=" + searchTerm + '&limit=1' + '&callback=?', function(data) { $.each(data.results, fun ...

javascriptjqueryhtmlcss

Is there a way to send all the results of a Flask database query to a template in a way that jQuery can also access

I am currently exploring how to retrieve all data passed to a template from a jQuery function by accessing Flask's DB query. I have a database table with customer names and phone numbers, which I pass to the template using Flask's view method "db ...

javascriptpythonjqueryhtmlflask

Issues with maintaining the checked state of radio buttons in an Angular 4 application with Bootstrap 4

In my Angular 4 reactive form, I am struggling with the following code: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary" *ngFor="let item of list;let i=index" > <input type="radio" name="som ...

htmlangulartypescriptbootstrap-4

An effective way to apply Bootstrap styles to projected content within an Angular 7+ application

Although Angular content projection documentation is lacking, I have successfully implemented content projection. However, I am unsure of how to pass Bootstrap classes down to the projected content <ng-content></ng-content> in the child compone ...

angularbootstrap-4angular7

Ensure that the dropdown <select> remains open even while filtering through options

I am currently working on implementing a mobile-friendly "filtered dropdown" design: https://i.sstatic.net/SYjQO.png Usually, a <select> control remains closed until the user clicks to open it. Is there a straightforward way to keep it always open ...

cssvue.jsdrop-down-menumobile-website

Is there a way to adapt my existing navigation bar to collapse on smaller devices?

Struggling to make my navigation bar collapsible on my site designed for a class project. Wondering if this requires both HTML and CSS, or can it be achieved with just HTML since this is my first time working on responsive design. Below is the code I have ...

htmlcssresponsive-design

Challenge with Bootstrap 4 post-transfer to Angular rc5 from rc beta

I recently upgraded my angular application from Beta version to Angular rc5. However, I encountered errors when attempting to add any bootstrap control in a component. (index):48 Error: (SystemJS) No Directive annotation found on Dropdown(…)(anonymo ...

angularangular2-directivesbootstrap-4

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

javascripthtmlcssvue.js

Achieving Perfect Vertical Alignment in Bootstrap 4 Grid Cells

I am currently working on an admin page that involves querying and reporting on the page weights of key pages on a website, such as landing pages. Bootstrap 4 is in the pipeline, and I have utilized it to design a layout that I am satisfied with. However, ...

htmlcsstwitter-bootstrap-4

How can I open a new window, redirect the current one, and bring focus to the new window using JavaScript?

Trying to troubleshoot a problem I'm having with the following setup: - Using SAP Portal, I am launching an HTML page containing this code. - The goal is for the HTML page to open a new window. - Once the new window opens, the original HTML page ...

javascripthtmlwindow.open

When implementing CSS object-fit: contain on an image, it may result in empty spaces surrounding the image

Within my image-wrapper container, I have an image with a variable resolution. The container itself has fixed dimensions for height and width. My goal is to center the image within the container both horizontally and vertically while adding a box-shadow e ...

htmlcssobject-fit

problem encountered when converting SVG HTML into SVG paths

Recently, I came across an interesting SVG file depicting a question mark enclosed in a circle. Intrigued by its design, I wanted to extract the paths from this SVG image so that I could integrate it directly into my codebase. Following some online tutoria ...

htmlcsssvggimp