CSS with border and margin issue

Question

hello guys i'm trying to add some space between boxes in my list when resize the page, i'm new with css, help me :D

 nav{ border: solid; border-color: black; } ul li { margin-bottom: 11px; display: inline; font-weight: 900; border: solid; border-color: black; } nav ul li{ color: black; text-decoration: none; padding: auto; padding-right: 80px; padding-left: 80px; } 

 <nav> <ul> <li>List</li> <li>Contact Us</li> <li>Shopping Cart</li> <li>Login</li> </ul> </nav> 

Answer 1

 nav{ border: solid; border-color: black; } ul li { margin-bottom: 11px; display: inline; font-weight: 900; border: solid; border-color: black; display:inline-block; } nav ul li{ color: black; text-decoration: none; padding: auto; padding-right: 80px; padding-left: 80px; } 

 <nav> <ul> <li>List</li> <li>Contact Us</li> <li>Shopping Cart</li> <li>Login</li> </ul> </nav> 

just add display:block to the li element

Answer 2

If you want to keep your inline elements, You can use the line-height property to create space between the rows. In this case, you don't need the margin-bottom rule.

 nav { border: solid; border-color: black; } ul li { display: inline; font-weight: 900; border: solid; border-color: black; line-height: 20pt; } nav ul li { color: black; text-decoration: none; padding: auto; padding-right: 80px; padding-left: 80px; } 

 <nav> <ul> <li>List</li> <li>Contact Us</li> <li>Shopping Cart</li> <li>Login</li> </ul> </nav> 

Otherwise you can just set display: inline-block; to your list elements so that they behave like inline elements, where block properties can be applied to.

 nav { border: solid; border-color: black; } ul li { margin-bottom: 4px; display: inline-block; font-weight: 900; border: solid; border-color: black; } nav ul li { color: black; text-decoration: none; padding: auto; padding-right: 80px; padding-left: 80px; } 

 <nav> <ul> <li>List</li> <li>Contact Us</li> <li>Shopping Cart</li> <li>Login</li> </ul> </nav> 

Answer 3

Try this.

 nav{ border: solid; border-color: black; } ul li { margin-bottom: 11px; display: inline; font-weight: 900; border: solid; border-color: black; padding:5px 5px; margin-right:5px; } ul{ margin: 0 auto; display:table; padding:15px; } 

 <nav> <ul> <li>List</li> <li>Contact Us</li> <li>Shopping Cart</li> <li>Login</li> </ul> </nav>