semantic ui container segment

Question

I'm learning semantic ui. But I always confuse about container and segment. I don't know when use container or segment,Those look not different beside margin. Someone explain it to me. Thank you.

Answer 1

Container and segment are different in the way they look as well as the way they function.

Look:

• A segment has the properties of box-shadow, border-radius and border (read: special formatting) that make it look elevated.
• A container looks simpler.
• Note: A basic segment does not have this special formatting.

Behavior:

A container is an element designed to contain page elements to a reasonable maximum width based on the size of a user's screen. This is useful to couple with other UI elements like grid or menu to restrict their width to a reasonable size for display.

• There is a maximum width associated with a container depending on the user size, but a segment does not have this restriction. A segment will take the full width of the space available.

• Note: However you can override this in site.variables:

Adjusting site breakpoints in site.variables to use custom values will automatically adjust container widths.