How to remove margin from every element that is the last element in a row?

by

Removing or adding stylings on a specific element of each row cannot be done with pure CSS unless you know exactly how many elements there are per row (via the nth-child() family of selectors).

Negative Margins

What you can to do in the case of margins is disguise them by adding negative margins on the parent element. This will give the illusion that your child elements fit inside the parent element while still having spacing between the individual elements:

http://codepen.io/cimmanon/pen/dwbHi

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

Splitting the margin in half and setting it on both sides (margin-left: 5px; margin-right: 5px) may give better results than a single margin on one side (margin-right: 10px), particularly if your design needs to work with LRT and RTL directions.

Note: this may require adding overflow-x: hidden on an ancestor element to prevent horizontal scrolling, depending on how close the container element is positioned to the edge of the viewport.

Media Queries

If you can reasonably predict how many items there are going to be per row, you can use media queries to target the last item in the row via nth-child(). This is considerably more verbose than using negative margins, but it would allow you to make other style adjustments:

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}
/* etc. */

More Related Contents:

  1. Could someone explain this CSS code?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  4. Is there any way to hover over one element and affect a different element? [duplicate]
  5. What is the difference between ‘>’ and a space in CSS selectors?
  6. Make a DIV fill an entire table cell
  7. Full-screen responsive background image
  8. Is there a CSS hack to affect Safari only NOT Chrome?
  9. Outlining and partially filling an SVG Shape
  10. Setting height: 100% on my label element doesn’t work
  11. ‘property: 0’ or ‘property: 0px’ in CSS?
  12. Twitter Bootstrap – add top space between rows
  13. hover on child without hover effect on parent [duplicate]
  14. Add a css class to a field in wtform
  15. How can I use CSS3 transform on a span?
  16. What is this CSS selector? [class*=”span”]
  17. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  18. How do I Make Firefox Print a Background-Color Style?
  19. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  20. How to use vertical align in bootstrap
  21. CSS text ellipsis when using variable width divs
  22. CSS text-decoration underline color [duplicate]
  23. Sub-Pixels calculated and rendered differently among browsers
  24. how to cancel opacity for a child element?
  25. Arrow Box with CSS
  26. Less CSS: Mixins with Variable Number of Arguments
  27. Vertically align Bootstrap badge inside heading
  28. CSS Floating Divs with different height are aligned with space between them
  29. Media Queries – Mobile vs Desktop Browser
  30. Dynamically updating css in Angular 2

Leave a Comment