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

Hey guys check out the below code :

HTML

<ul>
	<li>Hello</li>
	<li>Hello</li>
</ul>

CSS :

                 *{
    			margin: 0;
    			padding: 0;
    		}
			ul{
				margin: 0;
				padding: 0;
			}
			ul li{
				display: inline-block;
				padding: 2em;
				border: 1px solid #444;
				float: left;
				text-align: center;
				margin-right: -10px;
			}
			ul li + li{
				margin-right: -10px;
			}

The below line of code does't work .

ul li + li{
				margin-right: -10px;
			}

Why ?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi gautamz07, margin-right:

Hi gautamz07,

margin-right: -10px;
			}
			ul li + li{
				margin-right: -10px;

It's not going to do anything different to the margin-right above.
What are you trying to achieve?

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

Float and inline-block?

One or the other. A float element is {display: block;} by definition, so there is an automagical conflict. You've had similar conflicts in the past. You need to have compelling reason for any property you use, and not simply throw stuff at the wall to see what sticks.

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.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 46 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@gary and tony heres what i am trying to do

see the following fiddle :

fiddle

now do u see that the 1st

  • right border and 2nd li's left border form a border thats 2px when i actually want them to overlap and be combined into 1px .
  • So , i saw a neat trick online , What was the trick ?? Look below :

    All i need to do is in the

  • styles add this :
  • margin-right:-1px;

    check out the below fiddle :

    fiddle 2

    now my question is which li is the margin-right:-1px targeting and applying it to (common sense says it should apply it to both the li's ... but no , my below test will reveal more .) :

    So i ran a test :

    i took off the margin-right:-1px from the li{} styles and tried applying it to individual li's : check below to see what i mean :

    This does't work : (this applies to the secound li)

    ul li + li{
       margin-right:-1px;
    }

    This work's : (this applies to the first li)

    ul li:nth-child(1){
       margin-right:-1px;
    }

    which means that when i did the following :

    ul li{
       margin-right:-1px;
    }

    the rule was applying only to one particular li , the 1st one , WHY WAS THAT HAPPENING , the above CSS declaration should apply to both li's , and both li's should move to the right by -1px and the 2px border should still be visible .

    So my question once again is , WHY does the CSS rule apply only to one li when i am explicitly giveing a declaration as follows :

    ul li{
       margin-right:-1px;
    }

    And sorry for the display-inline and float put together , it was a mistake .

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

    margin-collapse?

    Margin-collapse only occurs vertically. In your fiddle code, simply remove the minus sign from the right margin, and you get a 1px gutter between li blocks.

    Either that or I don't get what it is you're trying to accomplish.

    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.