Link not being properly contained within div element

Is there a way to ensure that the link stays contained within the div element and does not extend beyond it? It seems like the padding is causing an issue where the div considers the link to be as tall as the text.

Any solutions or workarounds?

Check out this fiddle for reference

Here's the code snippet:


div {
    background-color: yellow;   
    margin-top: 20px;
}
a {
    padding: 10px;
    border: 1px solid black;
    background-color: blue;    
}
a:link {
    color: white;   
}

<div><a href="#">Link button</a></div>
htmlcss

Answer №1

section {
    background-color: mustard;   
    margin-top: 20px;
}
button {
    padding: 10px;
    border: 1px solid darkgray;
    background-color: navy; 
    display:inline-block    
}
button:hover {
    color: white;   
}

Answer №2

Ensure that the padding is applied to the div element, rather than the link.

div {
 padding: 10px;
 background-color: yellow;   
 margin-top: 20px;
}
a {
border: 1px solid black;
background-color: blue;
}
a:link {
 color: white;   
}

Answer №3

If you're applying padding to your anchor element, it's important to also set its display as block.

Check out my jsfiddle here.

div {
  background-color: yellow;   
  margin-top: 20px;
}
a {
  padding: 10px;
  display:block; //Don't forget this line
  border: 1px solid black;
  background-color: blue;    
}
a:link {
  color: white;   
}

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

How to align Vimeo embed to the left side

Is there a way to align a Vimeo iFrame to the left instead of it automatically centering itself? I want more control over its alignment within my flexbox container. I've created a Flexbox container named .example-div with two internal flex containers ...

htmlcssalignmentvimeovimeo-player

Concealing and revealing information with jQuery and AJAX

Need help hiding a Message and displaying an alert message after 5 seconds, but it's not working. What I want is for the Message to be hidden and show an alert message 5 seconds after clicking submit. <script> $(document).ready(function () { ...

javascripthtmljqueryajax

Is it feasible to incorporate the CSS and Bootstrap (CDNs) specific to an HTML component without affecting the styling of other pages?

One way I am able to recycle the HTML component is using this code: $.get("nav.html", function(data) { $("#fulloptions").replaceWith(data) }) However, there’s a conflict because nav.html uses a different version of Bootstrap than my index file does ...

htmlbootstrap-4

When resizing the window in IE8, the function DIV offsetWidth/Width/innerWidth returns a value of zero

My page is filled with many elements, one of which is the following DIV: <div id="root"> .................. <div id="child1"> ............. </div> <div id="child2"> ............... </div> & ...

javascriptjqueryhtmlcssinternet-explorer

Adjust the positioning of elements within a expanded and toggled Bootstrap navbar

Seeking assistance with a responsive Bootstrap navbar design. When the navbar collapses, the "logout" button is not aligning properly. Need help to keep it in the top row on the right side next to the toggler icon or underneath the other items on the right ...

htmlcssbuttonbootstrap-4navbar

Adjust the color of the font within a div element when hovering over it

I've been attempting to modify the text color and add an underline when a user hovers over it. Despite trying various methods, I haven't been successful. I scoured the internet for a solution but couldn't find one that met my specific requi ...

javascripthtmlcss

Floating image along with accompanying text; CSS styles have not been incorporated

As I work on developing my web application and utilize a bootstrap template, I encountered a situation where I needed to include an inline image with text, with the image floating to the left and the text positioned to the right. The paragraph element in ...

htmlcss

What is the solution to resolving an Open Quote error message in HTML coding?

Seeking assistance to resolve an HTML code error located at line 9. Fatal Error: Open quote is expected for attribute "{1}" associated with an element type "border". The problematic code snippet is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

javahtml

Does the height of a block element change based on the font size?

Does the font size of content affect the height of a block element? Let me demonstrate what I'm talking about, take a look at this example fiddle If you enlarge the font size of the class .p within the div, you'll notice that the div's hei ...

htmlcss

Is there a way to circumvent the mouse up event?

I want to create a feature where when a user clicks down, something specific occurs. The sequence of events includes: An action taking place (which is not the focus here). Triggering a mouse up event. Implemented with: angular, html, css. Excludes: jQue ...

javascriptcssangularjshtmlmouseevent

What is preventing this from functioning properly? (html/javascript)

I need help checking if this code is correct, as I am not very knowledgeable about HTML. I would appreciate it if someone could explain it to me in simple terms so I can understand. Here is the code: <input type="text" id="user" value=""> <inpu ...

javascripthtml

Modifying HTML Class Names

While engaging in web scraping, I encountered a frustrating NoSuchElement error popping up once every 2 or 3 successful attempts. This was happening even though I knew the element I was looking for was always present. It was a product's name stored in ...

pythonhtmlweb-scrapingweb-deployment

Retrieve the data contained within a displayed embed tag that includes a src attribute

Can anyone provide guidance on how to retrieve the content of an embed tag using src attribute? I have an embed tag pointing to a custom page as src. I tried to use jquery to access the rendered content but I am not getting anything back. Any suggestions ...

javascriptjqueryhtml

Display a custom dropdown menu depending on the value chosen from a separate dropdown menu

There are three dropdown lists, each enclosed in its own DIV container. The DIV containers are named fromCity, WithinStateLimits, and OutOfState. The goal is to use the jQuery script below to hide the other two DIVs when a user selects an option from the ...

javascriptjquerycssasp.net

Tips for showcasing images within buttons in HTML

Currently, I am working on setting up a local web server to manage various functions in my car using a RPi 4. For this project, I am incorporating libraries such as nodejs, npm, express, ejs, and rpi-gpio. My goal is to utilize rpi-gpio to operate relays ...

javascripthtmlnode.jsexpressdashboard

Designing a structure with three fieldset components

I'm currently trying to design a page layout that includes three fieldsets. My goal is to have the first one span across 100% of the width, with the other two positioned side by side below it at 50% width each. However, I am struggling to achieve thi ...

htmlcss

Utilizing KnockoutJS to Apply CSS Binding Based on Dropdown Selection

Check out the live example here: http://jsfiddle.net/0gmbbv5w/ In my application, I have an object retrieved from the database that I bind to a <select> var NoticeType = function (noticeType) { this.NoticeTypeId = ko.observable(noticeType.Notic ...

javascriptcssknockout.js

Tips for incorporating mapbox.js as a background while keeping html content and Navbar consistently displayed on top

I am currently integrating MapBox.js into a Bootstrap 3 website. The main concept is to utilize a map as the background for a row that occupies the full width of the site, with html-content displayed on top. To ensure MapBox.js remains in the background, I ...

javascripthtmlcsstwitter-bootstrapmapbox

Align text in a vertical manner within various containers

I'm encountering a puzzling issue with my side-by-side divs. I have different-size headers in each div, and I want the top header in each to be baseline aligned. Unfortunately, using vertical-align: baseline doesn't seem to work between the two d ...

htmlcss

Angular components are not properly adhering to the specified height and width dimensions for child elements

I seem to be having trouble applying height/width to a child component in angular. Can someone take a look and point out where I may have gone wrong? app.component.html <app-child [width]="10" [height]="10"></app-child> .child.ts import { C ...

cssangular