Issue with top margin not functioning as expected

Hello, I've been attempting to create some space between a button and a header. Unfortunately, no matter what value I input for the top margin, the two elements are not separating as expected.

I utilized Bootstrap to construct the button. Below is the pertinent HTML and CSS: 

<div class="section banner">
  <div class="container">
    <h3>Always have the answer to "What's for dinner?"</h3>
    <a class="btn-lg btn-default" href="#" role="button">Learn More</a>
  </div>
</div>

CSS:

/* Banner */
.banner, .supporting {
  text-align: center;
  padding-top: 40px;
}

.banner {
  background-color:#36343f;
  height:180px; 
  color: #fff;
}

.banner a {
  background-color: rgba(216,25,47,.5);
  border: 0px;
  color: white;
  margin-top: 100px;
}

.banner a:hover {
   background-color: rgba(216,25,47,1);
  text-decoration: none;
  color: white;
}

Regardless of my adjustments to margin-top:, there seems to be no effect. Given that .banner a { alters the button's color, I would anticipate its margin attribute to function similarly.

Is there anyone who can offer assistance?

htmlcsstwitter-bootstrap

Answer №1

To make the margin-top work for .banner a, simply add display: block; to the CSS. This is necessary because anchor elements default to display:inline.

.banner a {
  background-color: rgba(216,25,47,.5);
  border: 0px;
  color: white;
  margin-top: 20px;
  display:block;
}

You can also adjust the width and center it by adding text-align:center to its parent.

Check out the working example here!

Edit:

If you prefer a shorter button, use display: inline-block; instead of display:block.

Here's the updated fiddle link.

Answer №2

Enhance the text by enclosing it within an additional div container. For reference, you can find a functioning jsfiddle

/* Banner */
.banner, .supporting {
  text-align: center;
  padding-top: 40px;
}

.banner {
  background-color:#36343f;
  height:180px; 
  color: #fff;
}

.banner a {
  background-color: rgba(216,25,47,.5);
  border: 0px;
  color: white;
  margin-top: 100px;
}

.banner a:hover {
   background-color: rgba(216,25,47,1);
  text-decoration: none;
  color: white;
}

/*modification*/
.middle{
  padding:50px;
  
}
<div class="section banner">
  <div class="container">
  
    <!-- MODIFICATION-------->
  <div class= "middle">
    <h3>Always have the answer to "What's for dinner?"</h3>
    </div>
    
    <!----------------------->
    <a class="btn-lg btn-default" href="#" role="button">Learn More</a>
  </div>
</div>

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

Adjusting Bootstrap card content on hover

Currently, I am in the process of developing a website that features a list of products presented in bootstrap cards. I am seeking advice on how to dynamically change the text displayed on these cards when a user hovers over them. Specifically, I want to ...

javascripthtmlcssbootstrap-5

Attempting to insert an image into an HTML document

Simple question - feeling exhausted trying to uncover the solution. Here is what I am attempting: a(href="https://github.com/xxx") img#github-banner(style="position:absolute;top:0px;right:0;border:0;", src="app\public\img\logo ...

htmlnode.js

`Using a Video in a JQuery Carousel`

Currently in the early stages of developing a JQuery Slider that will kick off with a video, transitioning into slideshow mode once the video concludes. My goal is to ensure compatibility with IE9 and lower, as well as iPhone devices, necessitating options ...

htmlvideoflashjquery

The CSS style of the Div element is not being displayed properly when embedded with JavaScript

Currently, I am working on a simple page for practice purposes. The main issue I am facing is with a div element that has a red border and a blue background. Inside the div, there is a script tag calling an external JavaScript file. Surprisingly, the JavaS ...

javascriptcss

In terms of professional design, which is the better choice - Bootstrap or Foundation?

Greetings! I am in the process of creating a website with a professional design. I'm trying to decide between using Bootstrap 3 or Foundation 5 for my CSS framework. Which one do you recommend for designing purposes? Is there another CSS framework t ...

csstwitter-bootstrap-3

Issue with Bootstrap navigation bar not displaying on iPad devices

Currently, I am working on creating a custom bootstrap menu that displays properly on an iPad screen size. I have implemented the standard navbar code from Bootstrap with a few tweaks. While it works well on smartphones and laptops, the issue arises when ...

htmlcsstwitter-bootstrapipad

"Enhance Your HTA Webpage with a Hover Zoom Effect on CSS Tables

Greetings and thank you for taking the time to read my message. I am relatively new to this, so please bear with me if things seem a bit disorganized. I have constructed a table and am attempting to implement a hover effect to zoom in on a specific cell w ...

csshoverzoominghtml-tablehta

Transforming a CSS Clip Path into an SVG Clip Path without the need for an image

I have a basic HTML structure: .btn_clip { display: block; width: 524px; height: 170px; background: #ed1c23; font-size: 25px; color: #fff; text-align: center; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); line-heig ...

csssvgclip-path

The iPhone screen is unresponsive, causing the webpage to zoom in to the top left corner repeatedly

I've been wracking my brain trying to solve this issue, searching high and low on this site and others for a solution. I've attempted various configurations with the viewport meta tag, removing the fb-root div, ensuring there is no height=100%, b ...

iphonehtmlcssasp-classicviewport

How can I use Angular to toggle a submenu based on a data-target attribute when clicked?

Struggling to implement a functionality using ng-click to retrieve the data-target attribute of a clicked angular material md-button, in order to display the submenu when a topic is clicked on the sidenav. The navigation structure consists of md-list with ...

javascriptjqueryhtmlangularjs

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

htmlcss

The functionality of iOS 9 is hindering the accessibility of modal mobile links

On my website, I am using modal to display necessary information that requires users to click on buttons such as back and submit. However, the links seem broken even though they are supposed to redirect to another page. Whenever a button is clicked, the pa ...

javascriptjqueryhtmlioscss

Refreshing a div using JQuery/Ajax upon an update to a column in a database table

I am interested in checking for database column value changes and utilizing jQuery/Ajax to load a specific page into a designated div container. For example, let's say that on the main page, I have 1.php displayed within a div with the id "status." ...

javascriptphpjqueryhtmlajax

In search of assistance in delivering HTML form data to a public HTTP service

Seeking assistance with forwarding html form data to a public http service. Any guidance or tutorial recommendations would be greatly appreciated! Below is the structure of my form: <span class="text"> <input class="text" type="text" name="First ...

phpjavascripthtml

Proper Method for Constructing Forms

While developing a signup form, I've noticed that I often turn to using tables for proper alignment, similar to the approach used on the MySpace signup page where colspan is utilized to evenly space out elements. Is this method going against conventio ...

htmlcssformscss-tables

Is there a way to reverse the hover effect on div elements?

Let's start by examining the code I've written: HTML: <div class="button_container"> <div class="inner_button"> <a href="#" class="button_text">Button</a> </div> <div class="button_side"> ...

javascriptjqueryhtmlcsshover

Establishing space between table rows

I need to create a specific margin between two rows in a table. In my css code, I have the following snippet: background-color: #72c2dd; margin-top: 25px; The background-color is being applied correctly, but the margin-top property is not working as int ...

htmlcssmarginhtml-table

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Looking to tidy up my HTML/CSS. Is there a way to keep this JavaScript functioning without needing to add the class name to every li element within the ul? Any suggestions on how to improve the visual appeal and readability of the HTML code? const Profi ...

javascripthtmlcss

Transforming CSV CSS values with jQuery's CSS method: Step-by-step guide

My goal is to stack multiple background images within a single div container while ensuring their position is relative to the screen height. The problem I'm encountering is my inability to modify CSS values separated by commas. Here is my logical appr ...

javascriptjquerycsshtml

Steps for Enabling or Disabling a Bootstrap-Select Dropdown based on Radio Button Selection using JavaScript and jQuery

I am facing an issue with implementing two radio buttons and a Bootstrap-select Dropdown. I need to dynamically enable/disable the dropdown based on the selection of the radio buttons using JavaScript. Below is the HTML code snippet: Here is the code snip ...

javascripthtmljquery