Member Avatar for OmniX

I am trying to set the the attributes (border, width, etc) of a href tag using CSS.

But it is being very annoying!

Padding is working and color and thats just about it.

Width, height, borders (only see 2/3 out of the 4 sidded box), etc.

Any ideas?

Thanks, Regards X

PS: Note when I use the style on other tags there are different outcomes.

  • 3 Contributors
  • 6 Replies
  • 127 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by OmniX

Dani AI

Generated

Quick practical answer tied to the thread: you do not need an extra block element just to get a link to look like a box. Instead, change how the anchor is rendered with CSS and use box-sizing so borders and padding behave as you expect. That avoids invalid nesting issues called out by and gives the same visual result was aiming for, while keeping markup simple for .

Example: make the link itself a box and keep it accessible.

/* make the <a> behave like a box */
a.link-box {
  display: inline-block;
  width: 180px;
  height: 56px;
  padding: 8px;
  box-sizing: border-box;
  border: 2px solid #333;
  text-decoration: none;
  text-align: center;
  line-height: 40px; /* centers a single line of text vertically */
}

/* visible keyboard focus (do not remove focus styles) */
a.link-box:focus {
  outline: 3px solid #0a84ff;
  outline-offset: 2px;
}

Notes and troubleshooting tips:

  • display:inline-block or display:block is the key so width/height/border apply. See the CSS display docs for details (MDN: display).
  • Use box-sizing: border-box so specified width includes padding and border; otherwise your measured box can be larger than expected (MDN: box-sizing).
  • If you must wrap content, remember HTML5 allows anchors to contain block elements, but older doctypes do not—so validate your doctype and markup (MDN: a element).
  • If a border appears clipped or missing, inspect the computed box model in devtools: check display, overflow, parent heights, and line-height. Keep focus styles for keyboard users, and if the clickable thing is not a navigation link (it triggers actions), prefer a <button> or add appropriate ARIA and keyboard handlers.

Recommended Answers

All 6 Replies

Member Avatar for lio04

A href tag is only link, you can't set border, height, width.

These attributes you can set to any <div id="">, <img> tags and other, which be bounded between <a href="#"></a>.

Show here your code, because we don't know, what you need create with code.

Member Avatar for OmniX

pretty much just using css to make a href a box.

style="border: 3px solid; etc";

so you saying if i encapsulate it inside a div tag it will work?

Member Avatar for lio04

E.g. like this

In HTML file will be:

<a href="#"><div id="box">Active box</div></a>

In CSS file will be:

#box{
	width: 160px;
	height: 180px;
	background-color: black;
	border: 3px solid #A2A2F2;
	color: white;
	font-size: 36px;
}

This is only short example..

Member Avatar for OmniX

sounds cool ill try it and get back to you, thankyou :)

Member Avatar for MidiMagic

That won't validate - it's tag soup.

The anchor tag is an inline tag, and you can't put a block tag pair inside an inline tag pair. Div is a block tag.

You can't put box properties on inline tags either.

Put the anchor inside the div instead, and attach the box properties to the div.

Member Avatar for OmniX

Thats what I thought so should be like:

<div>
 <a href>
  LINK
 </a>
</div>

Thats it?

Been to busy at work to test it.

Regards, X

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.