Utilizing Padding Effectively Within an <a> Tag in HTML/CSS

Is there a way to make it so that clicking on the padding with the grey background color and orange rollover will also open the link, in addition to clicking on the text as expected?

https://i.sstatic.net/AJ9Fy.png

The JavaScript code is shown below:

sophiaList += "<li class='sophia_list_itemb' ><a class='sophia_book_link' 
href='" + neighborUrl + params + "' onclick='window.open(this.href); return false;' >" + image_title
        + "</a></li>";

The CSS code is shown below:

.sophia-books-listView li {
display: block !important;
/*height: 175px !important;*/
position: relative !important;
margin-bottom: 35px !important;
text-align:left !important;
font-family: verdana !important;
font-style: bold;
font-size: 13px;
background-color: #EBEBEB !important;
padding: 8px !important;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: -4px 3px 4px rgba(0, 0, 12, 0.72);
margin-left: 2px;
padding-left: 5px;
width: 80%;}

Please refer to the linked image for more information. Thank you.

htmlcss

Answer №1

To include padding in the total width and height of an element, you can utilize the border-box property for box-sizing. Here is an example:

.box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Some recommend applying box-sizing universally, which has shown favorable outcomes:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer №2

Anchor tags, also known as link tags, are inline elements with the same length as the text within them.

To transform your link into a block element, you need to add the following CSS:

display: block;
width: xxxxpx;
height: xxxxpx;

Feel free to customize the CSS above to suit your preferences.

Answer №3

This is the default behavior where the padding is considered part of the anchor tag, making it clickable.

View FIDDLE

<a href="#">You can click on the padded area as well</a>

a
{
    padding: 30px;
    background: yellow;
}

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

What is the best way to retrieve the value from a textarea and verify if it is blank or not?

I have successfully incorporated a textarea using simpleMde, but I am facing difficulty in retrieving the value and checking whether it is empty or not. var message = document.getElementById("simpleMde").value; console.log(message); <textarea class=" ...

javascripthtml

Change the border color when summernote is in focus状态

My goal is to change the border color of the summernote div to a light blue when it is focused, and then set it back to neutral when it loses focus. To remove the shadow around the div, I used the following CSS code: div.note-editor.panel.panel-default { ...

jquerycsshtmlsummernote

How can I attach a click event to the left border of a div using jQuery?

I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...

javascriptjqueryhtmlclick

Library of User Interface components for React Native applications

As I embark on my journey of building my first major app using React Native, a question comes to mind. Is there a UI framework available for React Native that offers pre-styled components right out of the box? Similar to how Ionic provides a base theme a ...

javascriptcssuser-interfaceionic-frameworkreact-native

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

htmlcss

One of my Bootstrap modals is able to scroll while the other remains non-scrollable when I open them simultaneously

I trigger the first modal using JavaScript and open other modals sequentially. While the first modal and some of the subsequent ones work properly, there is an issue with the second and third modals. The problem is that the scroll bar goes to the backgroun ...

htmlcsstwitter-bootstrap-3

once a value is assigned to the variable "NaN," it remains constant and does not alter

What is the reason for not getting an assigned value in the line val3.value = parseInt(val1.value + val2.value);? Is it because the specified value "NaN" cannot be parsed, or is it out of range? var val1 = parseInt(document.getElementById("num1")); var ...

javascripthtml

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM Now, I'm attempting to achieve the same effe ...

javascriptjquerycssreactjs

Even when assertExist is set to true in casperjs, the element cannot be located

I am currently encountering a problem with casperjs in my application. Here are the steps I am taking: 1) First, I am performing an assertion to check if the element exists. casper.then(function() { this.test.assertExists( { type: ' ...

javascriptjqueryhtmlcasperjs

What is the solution for aligning a button to the right instead of the left in Bootstrap?

I'm having trouble aligning my div next to my label in @EditorFor(model=>model.CourseName). The problem is that my @Razor code is showing below the label instead of next to it. Here is the code snippet: <div class="row"> ...

htmlasp.net-mvcbootstrap-4

Unable to alter background color of checkbox with jQuery slide toggle

I've been working on changing the background colour of the toggle button to green when it's turned on. I feel like I've followed all the correct steps, but for some reason, the background just stays grey. Can anyone point out what might be ...

jqueryhtmlcsscheckboxslidetoggle

Updating CSS in response to a button click using JavaScript: A step-by-step guide

Currently, I am in the process of creating a basic website with bootstrap5 (no JS at the moment). One issue I am facing is when I shrink the screen to the point where the navigation bar transforms into a burger button. Whenever I click on the burger button ...

javascripthtmlcssbootstrap-5

Display text when hovering over a button

My goal is to achieve something similar to the following: <button class="addMore">+</button> I want to create an effect like this: when the button is hovered over. I have searched for different solutions, but none of them match the exact be ...

htmlcss

Ensure that the logo/header remains fixed at the top of the page at all

Currently, I am facing an issue with keeping my logo/header at the top of the page. I have experimented with CSS properties like position: fixed; z-index: 9999; top: 0; left: 0;, and even tried adjusting the positioning to left: 40%; in an attempt to cente ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Is there a way for me to make a local HTML page save text directly to a file on my computer?

Currently, I am working on a straightforward HTML+JavaScript application that is designed to be loaded from a local file and run within the user's browser. The main functionality of this app will be to enable users to input text into a textarea and sa ...

javascripthtml

Issue with converting form data to JSON format

Having an issue converting a filled form in HTML to a JSON request for sending to the server via HTTP POST. Despite having a filled form, the JSON request only shows an empty array. Here is the JavaScript snippet: $("#submitSurveyBtn").on("click", functi ...

javascripthtmlajaxforms

Expanding the content of :before

I have implemented the code below to enable a hover effect when users hover over an image: &:before ' content: "example image" Background: #444; Padding: 20px Height: 300px Width: 300px Font family: 'open sans' Opacity: 0; ' &: ...

htmlcss

Hover over the text to zoom in on individual letters

Is it feasible to implement an effect on a website using CSS, JavaScript, jQuery, etc., that allows users to hover over individual letters of text and highlight each letter one at a time? This would create a 'zoom up' effect. Adding a small magni ...

javascriptjquerycsshtml

Ways to adjust the size of an HTML fieldset?

Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...

htmlcss

The color of the element remains unchanged even when hovering the cursor over it

Below is an example of HTML code: <h1 class="one">Hello</h1> Here is the corresponding CSS style sheet applied to it: h1:hover { color: red; } h1.one { color: blue; } When this code runs, the h1 element should turn blue. Ho ...

htmlcss