1 reply [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 10 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Ok suppose i have and tag and inside that i want a tag , but i want the small tag to be displayed on the nest line .

  <h5>
    Steve Jobs
      <small>Former Apple CEO</small>
  </h5>

So this will probably diaplay in the browser as

Steve Jobs Former apple CEO

So now to achieve what i wanted i am going to type the following code in HTML

   <h5>
    Steve Jobs
    <small  class="muted">former CEO</small>
</h5>

and the following code in CSS

  .muted{
    display:block;
    margin-top:15px;
        }

This gives me the result i want .

My Question is What is the display:block property Doing ?

My assumption is when i apply display:block to a specific tag , it tells the browser "Hey display me on a new line" . Is that what it does ?

Thank you .

regards .

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It's a bit more than that

See the display property. Then study the specs forwards and backwards, several times. CSS is a powerful tool and to become proficient, you absolutely must be intimate with the recommendation. (See also the html5 editor's draft on how to read the specification.)

In other words, it's a lot more than moving to a new line.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.