CODEWITHSUNDEEP
htmlcss
Pekka
Pekka

Reputation: 449385

Layout-neutral tag for CSS?

Is there an "invisible" tag in HTML (4) that I can use to make CSS distinctions

tag.myclass tag.mysubclass h1 {  }

without having any visual impact on the HTML rendered?

My background is that I have areas in a form that belong to different groups. As I am opening those in lightboxes (long story involving DOM operations and such, not really important) I don't want to rely on the usual div class=x or span class=y to style the subsequent elements, as I would have to reset margins here, paddings there, and so on.

A layout-neutral wrapping tag would be just what I need in such situations.

Upvotes: 9

Views: 8379

Answers (8)

Fernando D Jaime
Fernando D Jaime

Reputation: 302

The right answer is use a div tag and define a class for it. Here is an example:

<h2 style="font-size: 14px">Project 1 - Project 2 
  <div class="username">{% if request.user.is_authenticated%} Welcome {{request.user.username}} {% endif %}</div>
</h2>

then in your css file you can have a class like this:

.username {
    color:white; 
    float:right;
    padding-right: 100px;
}

voila!! It all belongs to h2 tag but the user name has a different css applied.

Upvotes: 0

Kamil Szot
Kamil Szot

Reputation: 17817

I suspect you can use <object> tag without usual attributes for that purpose, but I haven't tested it thoroughly yet. It's even in HTML5 (unlike FONT tag).

Upvotes: 0

jeroen
jeroen

Reputation: 91734

I'd say a span tag is as neutral as they come. I don't think there's any browser that applies a margin nor a padding and it just wraps around it's contents.

Upvotes: 3

Alan
Alan

Reputation: 593

I think you want a <fieldset>.

Upvotes: 3

Tim Hettler
Tim Hettler

Reputation: 1256

While all browsers give default styling to many HTML tags, at it's core HTML only describes data, it doesn't format it.

What you're probably looking for is a DIV tag, because no browser gives any default styling to that tag.

Upvotes: 5

Ethan Turkeltaub
Ethan Turkeltaub

Reputation: 2961

You can add display: none; to it. That won't display it (obviously).

Upvotes: -1

Sam DeFabbia-Kane
Sam DeFabbia-Kane

Reputation: 2609

No, there is not.

(And that's because such an element wouldn't really fit into the rest of HTML. The only reason DIV and SPAN affect the surrounding area is because they're block and inline elements, respectively. What would an 'invisible' element be? If you need something that's completely independent, absolutely (or relatively) position it and give it a higher z-index.)

Upvotes: 5

codeinthehole
codeinthehole

Reputation: 9026

If you want to group elements use a div or a span tag as a wrapper element. Apply your id or class to this, and style it accordingly.

EDIT

There isn't an 'invisible' tag - but margins and padding can be easily reset 'margin: 0; padding: 0;'

Upvotes: 5

Related Questions