Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Thanked 0 Times in 0 Posts

    Inline Element, If floated become block-level element

    Hello everyone! I read an article that says, "Inline Element - If floated left or right, will automatically become a block-level element, subject to all block characteristics." I don't think this is right, I tried it but it does not seem to have the characteristics of block element. I tried to float a <span> tag, expecting to have the block element characteristics, but stays to have inline characteristics.

    Here is the characteristics of Block and Inline-level Elements
    Block Elements:
    • If no width is set, will expand naturally to fill its parent container
    • Can have margins and/or padding
    • If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned)
    • By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements)
    • Ignores the vertical-align property

    Inline Elements:
    • Flows along with text content, thus
    • Will not clear previous content to drop to the next line like block elements
    • Is subject to white-space settings in CSS
    • Will ignore top and bottom margin settings, but will apply left and right margins, and any padding
    • Will ignore the width and height properties
    • If floated left or right, will automatically become a block-level element, subject to all block characteristics
    • Is subject to the vertical-align property

    source: http://www.impressivewebs.com/difference-block-inline-css/
    Last edited by VIPStephan; 05-16-2014 at 08:57 AM. Reason: removed link

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Thanked 56 Times in 56 Posts

    Basically it's correct, but maybe the words are not very well choosen.
    When you have any doubt about some behaviors I suggest you to look for the answer at the source: the w3c recommandation. This part answers to your question:

    Quote Originally Posted by W3C
    9.7 Relationships between 'display', 'position', and 'float'

    The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

    1. If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
    2. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
    3. Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.
    4. Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'.
    5. Otherwise, the remaining 'display' property values apply as specified.

    Specified value -> Computed value

    inline-table -> table
    inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block -> block
    others -> same as specified
    According to above, the default display property for your span is set to block, if the float property is set to left or right and the display property is static or set to relative. I would have not mention the "subject to all block characteristics" part as the float has an impact on severall default block's behaviors such width.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts