SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Indents first word

    Hello all, I would like to first introduce myself to the forum... this is my first post. I am very new to web design and have a question about CSS that I am using.

    The first word of every paragraph automatically indents... why does it do this? Can anyone help me to understand and resolve this.

    here is an example

    http://bicyclenerd.com/belmont.html

    Thanks very much for any help!

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because you have enclosed the text in a SPAN with padding-left:5px.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excuse me for sticking my nose in here Cuckoo but I was looking at his code when you answered ..... the padding-left: should apply to the WHOLE text area enclosed by the span "main" .... which he has mistakenly used instead of <p> tags ......

    BUT I downloaded the code and sure enough you are right .. but to be VERY honest I DONT KNOW WHY!

    Padding shouldnt apply to the first line only, it should apply to the WHOLE block of text contained by the span ...... or is it because the span is an inline element? hmm, darn confused here? Can you shed some light?

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    I got it to work ( i think )... i enclosed it in the <p> tag... I still get confused as to when to use div span p etc...

    here is the new link

    http://bicyclenerd.com/belmont.html

    is there a way to tighten up the space between paragraphs?

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can change the margins and padding of the p tags in css to make the gaps smaller

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dc dalton
    Excuse me for sticking my nose in here Cuckoo but I was looking at his code when you answered ..... the padding-left: should apply to the WHOLE text area enclosed by the span "main" .... which he has mistakenly used instead of <p> tags ......

    BUT I downloaded the code and sure enough you are right .. but to be VERY honest I DONT KNOW WHY!

    Padding shouldnt apply to the first line only, it should apply to the WHOLE block of text contained by the span ...... or is it because the span is an inline element? hmm, darn confused here? Can you shed some light?
    You are right (at least close enough): it's because the SPAN generates an inline box (because it's an inline element and the display property has not been changed).

    Horizontal padding is only applied at the beginning and the end of an inline box. If that box is split over multiple line boxes, no padding is added at those breaks. Look at 9.4.2 Inline formatting context of the CSS specification if you feel like having a slight headache. Particularly:
    When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).
    Birnam wood is come to Dunsinane

  7. #7
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dc dalton
    Excuse me for sticking my nose in here Cuckoo but I was looking at his code when you answered ..... the padding-left: should apply to the WHOLE text area enclosed by the span "main" .... which he has mistakenly used instead of <p> tags ......

    BUT I downloaded the code and sure enough you are right .. but to be VERY honest I DONT KNOW WHY!

    Padding shouldnt apply to the first line only, it should apply to the WHOLE block of text contained by the span ...... or is it because the span is an inline element? hmm, darn confused here? Can you shed some light?
    That's funny, cause I was looking at this last night and could not figure out why only the first line was effected. I kept looking for a text-indent somewhere but to no avail :'(

    Thanks to AutisticCuckoo we all now know

  8. #8
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Johnny Gulag
    That's funny, cause I was looking at this last night and could not figure out why only the first line was effected. I kept looking for a text-indent somewhere but to no avail :'(

    Thanks to AutisticCuckoo we all now know
    Yeah I was staring at the code saying what the $^#^ ..... Im doing cntrl F looking for text-indent too....... thats why I didnt answer it until Cuckoo did ..... but as you noticed half way thru my question to him the "lightbulb" began to flicker

    Thanks Cuckoo ..... another day, something I didnt know yesterday!


Bookmarks

Posting Permissions

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