Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
SHARED: Understanding Block Level And Inline Level Elements(differences)
#1
Block vs. inline level
elements

As You All know Nearly all HTML elements are either block or inline elements.
The features of block
elements include:

1. Always begin on a new
line
2.Height, line-height and
top and bottom margins can be
manipulated
3. Width defaults to 100%
of their containing
element, unless a
width is specified


Inline elements are direct opposite
1.Begin on the same line Height, line-height and top and bottom
margins can't be changed
2.Width is as long as the text/image and can't be manipulated

To change an element's status
you can use
display:inline or display:block. But why would you want to change
block to inline? Wel u can use dis to your advantage:
1.Have an inline element
start on a new line
2.Have a block element
start on the same line
3.Control the width of an
inline element
4.Manipulate the height
of an inline element
5.Set a background
colour as wide as the
text for block elements,
without having to
specify a width
All these and more!
But i @Spruce want to teach you an important trick in css that most people dont feel as important.. Css Aligning
As you know you can align text with d following css
PHP Code:
text-align:value

But what happens when you want to align an element not text these time? You we find it hard. I know you would not find this trick interesting bcos you have not come across sumting like dat be4. Now straight to d point.
PHP Code:
margin:auto

is supposed to align any element to the center but it never does. That is just because you missed the display property, Now if you have been following me 4rm d start you would have seen that inline elements cant be manipulated. So you just add the following line of code and you are good.
PHP Code:
display:block;margin:auto

Thank u. Spruce
@Dynamo @jonath45 @dealwap
Spruce owner of webforum
[-] The following 2 users Like Spruce's post:
  • Aphatheology, dealwap
#2
Nice post. @Spruce

I will keep this is mind...
Posting From http://ncgblog.ga
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  Differences Between A Webdeveloper And A Webdesigner dealwap 2 237 07-10-2017, 10:33 PM
Last Post: dealwap
  Discussion: Country Code Top Level Domain Vs. Top Level Domain ryanmontana 7 477 01-10-2017, 11:35 AM
Last Post: Robertunere
  How To Block Ads On Chrome, Firefox And Other Popular Browser dealwap 0 231 11-16-2016, 08:46 AM
Last Post: dealwap
  What Are The Main Differences Between SQL, mySQL and NoSQL? Nostory 1 199 11-05-2016, 09:37 AM
Last Post: dealwap
  FUN: 6 Differences Between The Ones Who Like You And The One Who Will Keep You Don Kekky 2 192 11-04-2016, 05:50 AM
Last Post: Aphatheology
  Creating And Understanding Smf Themes Iphekitan 7 477 10-05-2016, 01:02 AM
Last Post: Iphekitan
  How To Detect And Block Ads Blocker On Your Wordpress dealwap 0 311 09-22-2016, 09:19 AM
Last Post: dealwap
  HOW TO BLOCK YOUR COMPUTER FROM OPENING ADULT CONTENT SITES Noblez 5 574 06-14-2016, 07:52 AM
Last Post: Aniexcels
  HOW TO BLOCK UNWANTED EMAILS FROM ENTERING YOUR MAIL BOX Noblez 1 549 04-26-2016, 07:21 PM
Last Post: dealwap
  HOW TO AVOID FRIEND REQUEST BLOCK emmnedy 0 289 01-25-2016, 09:06 AM
Last Post: emmnedy



Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links

              Advertise