เมื่อเพิ่มเส้นขอบ 1 px ใน div ขนาด Div จะเพิ่มขึ้นไม่ต้องการทำเช่นนั้น

เมื่อคลิกฉันกำลังเพิ่มเส้นขอบ 1px เป็น div ดังนั้นขนาด Div จึงเพิ่มขึ้น 2px X 2px ฉันไม่ต้องการเพิ่มขนาด Div มีวิธีง่ายๆในการทำไหม

คำอธิบายโดยละเอียดที่ไม่เป็นระเบียบ
จริงๆแล้วฉันกำลังเพิ่ม DIV ที่มี float: left (ขนาดเท่ากันเช่นไอคอน) ไปยัง container-div ดังนั้นทั้งหมดจะซ้อนกันทีละตัวและเมื่อ (ความกว้างของ container-div คือ 300px) ไม่มีช่องว่างเหลือ แต่ width-wise ดังนั้น DIV เด็กอยู่ในแถวถัดไปดังนั้นจึงเป็นเหมือนแค็ตตาล็อก แต่เนื่องจากขนาด DIV ที่เลือกได้เพิ่มขึ้นเท่านั้น DIV ภายใต้ DIV ที่เลือกจะไปทางขวาและสร้างพื้นที่ว่างด้านล่าง DIV ที่เลือก

แก้ไข:
การลดความสูง / ความกว้างในการเลือก แต่จะเพิ่มกลับได้อย่างไร ใช้กรอบงานของบุคคลที่สามดังนั้นอย่าให้มีเหตุการณ์เมื่อ DIV สูญเสียการเลือก ..

คุณสมบัติ border css จะเพิ่มขนาด "ภายนอก" ขององค์ประกอบทั้งหมดยกเว้น tds ในตาราง คุณสามารถเข้าใจวิธีการทำงานนี้ได้ใน Firebug ( ถูกยกเลิก ) ภายใต้แท็บเค้าโครง html->

ตัวอย่างเช่น div ที่มีความกว้างและความสูง 10px และเส้นขอบ 1px จะมีความกว้างภายนอกและความสูง 12px

ในกรณีของคุณเพื่อให้ดูเหมือนว่าเส้นขอบอยู่ที่ "ด้านใน" ของ div ในคลาส CSS ที่คุณเลือกคุณสามารถลดความกว้างและความสูงขององค์ประกอบโดยเพิ่มขนาดเส้นขอบของคุณเป็นสองเท่าหรือคุณสามารถทำเช่นเดียวกันสำหรับ การเติมองค์ประกอบ

เช่น:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

นอกจากนี้ยังมีประโยชน์ในสถานการณ์นี้ ช่วยให้คุณกำหนดเส้นขอบโดยไม่ต้องเปลี่ยนความกว้างของ div

textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

นำมาจากhttp://css-tricks.com/box-sizing/

กำหนดเส้นขอบก่อนที่คุณจะคลิกให้เป็นสีเดียวกับพื้นหลัง

จากนั้นเมื่อคุณคลิกเพียงแค่เปลี่ยนสีพื้นหลังและความกว้างจะไม่เปลี่ยนแปลง

อีกวิธีที่ดีคือการใช้แทนoutline borderเพิ่มเส้นขอบโดยไม่ส่งผลกระทบต่อรูปแบบกล่อง ใช้งานได้กับ IE8 +, Chrome, Firefox, Opera, Safari

( https://stackoverflow.com/a/8319190/2105930 )

ลองเปลี่ยนborderเป็นoutline:

outline: 1px solid black;

เมื่อใช้วิธีแก้ปัญหาเหล่านี้จำนวนมากฉันพบว่าการใช้เคล็ดลับในการตั้งค่าborder-color: transparentให้ยืดหยุ่นและได้รับการสนับสนุนอย่างกว้างขวางที่สุด:

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

ทำไมถึงดีกว่า:

• ไม่จำเป็นต้องฮาร์ดโค้ดความกว้างขององค์ประกอบ
• รองรับข้ามเบราว์เซอร์ที่ยอดเยี่ยม (พลาดเฉพาะ IE6)
• แตกต่างกับoutlineคุณยังสามารถระบุเช่นด้านบนและเส้นขอบด้านล่างแยกต่างหาก
• แตกต่างจากการตั้งค่าสีเส้นขอบให้เป็นพื้นหลังคุณไม่จำเป็นต้องอัปเดตหากคุณเปลี่ยนพื้นหลังและเข้ากันได้กับพื้นหลังสีที่ไม่ทึบ

ลองทำตามนี้

box-sizing: border-box;

ฉันมักจะใช้ช่องว่างภายในเพื่อแก้ไขปัญหานี้ ช่องว่างภายในจะถูกเพิ่มเมื่อเส้นขอบหายไปและจะถูกลบออกเมื่อเส้นขอบปรากฏขึ้น โค้ดตัวอย่าง:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

ดูโค้ดตัวอย่างเต็มของฉันบน JSFiddle: https://jsfiddle.net/3t7vyebt/4/

เพียงแค่ลดความกว้างและความสูงลงสองเท่าของความกว้างของเส้นขอบ

คุณสามารถทำสิ่งที่แปลกใหม่ด้วยเงาที่ฝังไว้ ตัวอย่างการใส่เส้นขอบที่ด้านล่างขององค์ประกอบโดยไม่เปลี่ยนขนาด:

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

บางครั้งคุณไม่ต้องการให้ความสูงหรือความกว้างได้รับผลกระทบโดยไม่ได้ตั้งค่าอย่างชัดเจน ในกรณีนี้ฉันคิดว่าการใช้องค์ประกอบหลอกจะเป็นประโยชน์

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

คุณยังสามารถทำสิ่งต่างๆได้มากขึ้นด้วยองค์ประกอบหลอกดังนั้นนี่จึงเป็นรูปแบบที่ทรงพลังมาก

ลองลดขนาดระยะขอบเมื่อคุณเพิ่มเส้นขอบ

ฉันจำเป็นต้องสามารถ "ขีดขอบ" องค์ประกอบใดก็ได้โดยการเพิ่มคลาสและไม่ส่งผลต่อมิติของมัน ทางออกที่ดีสำหรับฉันคือการใช้กล่องเงา แต่ในบางกรณีไม่สามารถมองเห็นผลกระทบได้เนื่องจากพี่น้องคนอื่น ๆ ดังนั้นฉันจึงรวมทั้ง box-shadow ทั่วไปและ box-shadow ที่ใส่เข้าไป ผลลัพธ์ที่ได้คือรูปลักษณ์ของเส้นขอบโดยไม่เปลี่ยนมิติใด ๆ

ค่าที่คั่นด้วยลูกน้ำ นี่คือตัวอย่างง่ายๆ:

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

ปรับลุคที่คุณชอบแล้วคุณก็พร้อม!

เรายังสามารถใช้ฟังก์ชัน css calc ()

width: calc(100% - 2px);

การลบ 2px สำหรับเส้นขอบ

.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}

คุณสามารถสร้างองค์ประกอบที่มีเส้นขอบที่มีสีเดียวกับพื้นหลังของคุณจากนั้นเมื่อคุณต้องการให้เส้นขอบแสดงเพียงแค่เปลี่ยนสี

ในกรณีที่เนื้อหาของคุณdivแสดงผลแบบไดนามิกและคุณต้องการตั้งค่าความสูงคุณสามารถใช้เคล็ดลับง่ายๆกับoutline:

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

ตัวอย่างที่นี่: https://codepen.io/Happysk/pen/zeQzaZ

คุณสามารถลองใช้กล่องใส่เงา

ประมาณนี้: box-shadow: inset 0px -5px 0px 0px #fff

เพิ่มเส้นขอบ 5px สีขาวที่ด้านล่างขององค์ประกอบโดยไม่ต้องเพิ่มขนาด