CODEWITHSUNDEEP
htmlcss
loulou
loulou

Reputation: 63

What is the meaning of a div container for a single element?

I often see things like :

<div id='side_logo'>
    <a class="logo" href="index.html">
         <img src="img/logo.png">
    </a>
</div>

What are the advantage to use the above markup instead of just :

<a id='side_logo' class="logo" href="index.html">
        <img src="img/logo.png">
</a>

Upvotes: 0

Views: 352

Answers (4)

ralph.m
ralph.m

Reputation: 14345

One reason I often use a wrapping div is that it mixes better with other block elements. As a rule, I don't like to have inline elements butting up against block elements. You can set the a to display: block, but I've found that somewhat unreliable in some browsers (where things like margins on the a don't work reliably on every page load).

Upvotes: 1

gersande
gersande

Reputation: 463

In the actual example you've selected, <div> turns the <a> from an inline element to a block element, which has different properties.

Upvotes: 1

user1890615
user1890615

Reputation:

If you have a mixture of links, lists, spans, images, and tables on the first layer of the body, things can get all jumbled up with the diversity of default css properties.

Upvotes: 0

Josh Lowry
Josh Lowry

Reputation: 447

It allows better control over styling. For example, if you wanted the logo in your example to sit inside a colored box that was larger than the logo image, but you only wanted the logo itself to be a clickable anchor.

Upvotes: 5

Related Questions