How come <a/> links get display:block, and <div style doesn't?

HTML & CSS
1

I was going through my code and I noticed this pattern. How come <a/> link tags require display;block, and <div style= doesn’t require it?

<a href="http://start.io/music247" target="_blank" style="display:block; margin: -50px 0 0 108px; width: 50px; height: 50px;background-color:#cc333f;" onmouseover="this.style.backgroundColor='#b7ab9d';
this.style.color='transparent'"
onmouseout="this.style.backgroundColor='#cc333f'"></a>

<div style="margin: -24px 0 0 89px; width: 88px; height:18px; border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;background-color:#ffffff;">
2

You’ve been told many many times now of the differences between block and inline elements so these same questions are wearing a little bit thin now.

‘A’ elements are inline elements by default and have a default display of inline. If you need to apply dimensions or proper vertical margins and padding then you need to set them to display: block ( or display:inline-block).

7 Likes
3

The reason of this is
Tag a is by default inline element
And
Tag div is block element

Basically there is two type of elements some are

  1. Inline
  2. Block
    If you want a inline element behaves like block element then you must have to specify it’s behaviour.
4 Likes
4

I know the Discourse search can be a little awkward to use, so I suggest you use the bookmark facility to keep note of useful posts, so you can easily refer back to them.

For example, this thread from yesterday: Does and should [display values] be put on every style tag? - #5 by PaulOB and this post from last week: Does and should [display values] be put on every style tag? - #5 by PaulOB contain all the information required for you to answer that question yourself.

6 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.