An anchor within a <p> tag causes an escape from a <div> element that has padding

Looking at my HTML file...

<div>
<p>This is where I have my text content...</p>
<p><a href="#">Link 1</a><a href="#">Link2</a></p>
</div>

Here is the accompanying CSS:

div {
    width:960px;
    border:1px solid;
    margin:0 auto;
}
a {
    padding:10px 10px 50px 10px;
    margin-right:20px;
    border:1px solid red;
}

An issue arises with my anchors as they extend beyond the boundaries of the parent div due to a total padding of 60px. Since the content length varies, I cannot set a fixed height for the div. Any suggestions on how to determine the width of the div to contain the anchors within it?

htmlcss

Answer №1

To achieve the desired look, you can set the anchors to display as inline-block.

http://example.com

.container {
    width:800px;
    border:1px solid;
    margin:0 auto;
}
.link {
    padding:10px 10px 20px 10px;
    margin-right:15px;
    border:1px solid blue;
    display: inline-block;
}

Answer №2

a {
    padding:15px 10px 50px 10px;
    margin-right:20px;
    border:1px solid blue;
    display: inline-block;
}

Applying these adjustments should resolve your problem!

Answer №3

To get your anchor tag to work properly, apply the CSS property display: inline-block.

You can view a demonstration here

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 center a Div element without it scrolling?

Can someone assist me in resolving this problem? I am struggling to design a webpage with two images inside a div, centered on the screen. Currently, it is centered but I do not want it to be scrollable. My goal is to display the full image without needing ...

htmlcss

Transform the appearance of an HTML tag using React

I am attempting to alter the appearance of the h1 tag in React by using style attributes, specifically focusing on color attributes. <h3 style={{color: "white", font-family:"opensans-bold"}}> Hello World! </h3> Unfortunatel ...

htmlcssreactjs

How to successfully implement ng-show with Html5's <dialog> tags

It's incredible how simple Html5 dialogs are. It feels like they should have been here 15 years ago! I'm having trouble getting ng-show to work with dialogs. Any tips on how to make it happen? <!DOCTYPE html> <html ng-app="project"> ...

angularjshtmldialog

Develop a gallery similar to YouTube or Vimeo

Is there a way to display a collection of SWF movies in a single DIV, with one SWF already set as the default? Something like a photo gallery but for SWFs. I would like to implement this using JQuery. Any suggestions or tips on how to achieve this? ...

javascriptjqueryhtmlcss

Ways to extract code within delimiters

After loading a template from a file, the structure is as follows: [[style]].someclass{padding:10px 15px}[[/style]] [[code]]<tr><td class="someclass">{{text}}</td></tr>[[/code]] The template is loaded using .get() and stored in th ...

javascriptjqueryhtmlcss

Failed to send ajax request

Greetings! I am currently in the process of modifying a code snippet that I stumbled upon during a Google search to suit my module's requirements. The link to the original code is The code I have been working on is as follows: Here's my mod_aja ...

phpjqueryajaxhtmljoomla

What is the best way to merge several CSS class selectors into a single one?

I am facing an issue with using multiple selector classes in my HTML elements. For example: .rt-grid-6 { ... } .largemargintop { ... } .rt-left { ... } Currently, I have to use these classes repetitively in my HTML like this: <div class="rt-grid-6 l ...

jqueryhtmlcss

Exploring the process of updating the background color of a specific component in Angular

I'm currently working on a website that will feature alternating colors of white and black. However, I am facing an issue where I can only apply background color changes globally in the CSS file. Does anyone know how to address this problem? ...

htmlcssangular

Creating a Visual Balance with CSS Image Margins

div#columncontents { background: black; } img.colimg03 { position: relative; right: -70px; } img.colimg02 { position: relative; right: -40px; } <div id="columncontents"> <div class="columnimage"> <img class="colimg01" src=" ...

htmlcss

(Material UI version 5) Custom global style enhancements

One of the examples in MUI is the Global style overrides: const theme = createTheme({ components: { // Name of the component MuiButton: { styleOverrides: { // Name of the slot root: { // Some CSS fontSize ...

cssreactjsmaterial-ui

The opacity behavior of jQuery seems to behave strangely on IE10

Within my project, the left side of the content is contained within a div called ".container", and there's a preloader located in an element with the ID "#preloader." Across all major browsers, the functionality works smoothly as intended - when all ...

jquerycss

Could you provide some guidance on the best practices for using multiple <br /> tags?

My webpage is powered by php and includes tables, input boxes, and a form. The design is simple, but I incorporate <br /> tags in various places for spacing purposes. At times, I find myself using two or three <br /> tags in a row to achieve th ...

phphtmlcss

Sending an array through HTML select using Jquery

Is this scenario possible: I have implemented an Ajax call to fetch results from a SQL query. The data is retrieved in an array format, which I then convert to JSON and output at the end of a PHP script that the Ajax function calls. Next, for each row in ...

jqueryhtmlarraysselect

Tips on deactivating or disregarding a click() event

I have created a card with an anchor tag and added an onclick() event to the card using its id. The click is working fine, but the issue is that even if the checkbox, image, or button inside the card is clicked, the click event of the card is triggered. Ho ...

jqueryhtmlonclick

Tips for arranging two columns and two rows on mobile using Bootstrap 5

I'm currently using bootstrap 5, and I need to display 2 columns and 2 rows on my mobile device, but it's only showing 1 row. I have two PSDs for this layout in desktop mode: https://i.sstatic.net/HWG6e.png And for mobile mode: https://i.ssta ...

htmlcssbootstrap-5

Eliminate any spaces surrounding the text within the div tag

Is it possible to eliminate extra space at the end of text using CSS (or possibly JS)? I've experimented with various display properties, but none seem to be effective. I need to dynamically insert a blink-div at the conclusion of a multi-line sentenc ...

javascripthtmlcsswhitespaceremoving-whitespace

What could be causing the text-end to fail in Bootstrap 5?

Why can't I align the text to the right? Feeling frustrated as a beginner. <div class="top-bar"> <div class="container"> <div class="col-12 text-end"> <p><a href="tel:06 ...

htmlcssbootstrap-5

How to Make Bootstrap 3 Collapse Panels Stand Out with an Active Class

First of all, here is the fiddle link: http://jsfiddle.net/krish7878/h38jn324 I have a simple question. When a panel is clicked and it expands to show its contents, a class 'active' should be added to 'panel-heading'. I came across a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Semantic UI dropdown field not displaying selected option text

I've encountered an issue while working with React Semantic UI. I'm trying to render a dropdown and have configured it so that the selected option's text should display in the field. However, when I choose an option from the dropdown, instea ...

javascripthtmlcssreactjstsx

Manipulating SVG filter attributes with CSS: A comprehensive guide

In my quest to master CSS animation, I found myself needing to manipulate the values of SVG filter attributes. While attempting to reference a CSS variable within the specularConstant attribute, I encountered an error from the browser. Is it feasible to ...

csscss-animationssvg-filterscss-variables