CODEWITHSUNDEEP
htmlcss
joekazmac
joekazmac

Reputation: 31

how to insert a space in between horizontal unordered lists

I am trying to make the top of my website. I need more spacing in between the logo and the name in the border. My CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

.list {
border-style: ridge;
border-color: green;
border-width: 25px;
}

I want more of a space between the image and the name, now it is about a centimeter or two apart.

Upvotes: 0

Views: 53

Answers (3)

nish
nish

Reputation: 1221

Use 'margin' properties to create space around elements, outside of any defined borders. There are properties for setting the margin for each side of an element (margin-top, margin-right, margin-bottom, and margin-left).

Sample Code

div {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 100px;
  }

If you want to generate space around an element's content or inside of any defined borders, use 'padding'.

Sample Code

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  }

Refer the below link for more details.

https://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu

Upvotes: 2

Andre Ramadhan
Andre Ramadhan

Reputation: 427

use margin : 0 15px; (for side margin) or, margin : 15px 0: ( for top and bottom margin)

but if you want the space between border and content use padding instead.

Upvotes: 1

SourceOverflow
SourceOverflow

Reputation: 2048

You can always use margin-right and apply that to your logo. Remember, however, to not have it mess up your layout on smaller screens.

Upvotes: 1

Related Questions