Preventing “double” borders in CSS

by

If we’re talking about elements that cannot be guaranteed to appear in any particular order (maybe 3 elements in one row, followed by a row with 2 elements, etc.), you want something that can be placed on every element in the collection. This solution should cover that:

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

Note that outline doesn’t work in older browsers (IE7 and earlier).

Alternately, you can stick with the borders and use negative margins:

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

More Related Contents:

  1. How to remove the spaces between the form and the footer as shown below in the picture?
  2. How to change the cursor into a hand when a user hovers over a list item?
  3. CSS scoped custom property ignored when used to calculate variable in outer scope
  4. Hide text node in element, but not children
  5. How and where to use ::ng-deep?
  6. CSS transparent curved shape with two rounded sides
  7. Is the CSS :not() selector supposed to work with distant descendants?
  8. How to animate handwriting text on the web page using SVG?
  9. Combining :last-child with :not(.class) selector in CSS
  10. Using HTML data-attribute to set CSS background-image url
  11. What are `scrolling boxes`?
  12. CSS transition shorthand with multiple properties?
  13. How can I apply multiple transform declarations to one element?
  14. Float right and position absolute doesn’t work together
  15. Converting and rendering web fonts to base64 – keep original look
  16. Why doesn’t inset box-shadow work over images?
  17. text-overflow ellipsis on flex child not working [duplicate]
  18. Make HTML5 video poster be same size as video itself
  19. Why does stacking order change on webkit filter hover?
  20. css text gradient
  21. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  22. Make CSS3 triangle with linear gradient
  23. Can I have different colored left and top borders in CSS?
  24. Safe width in pixels for printing web pages?
  25. Difference between flex-end and end? [duplicate]
  26. CSS text align justify big spaces
  27. Purpose of *:before, *:after rule without content property
  28. CSS Selector for not a child of element type?
  29. chrome : how to turn off user agent stylesheet settings?
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment