Înălțimea marginii pe CSS (Programare, Html, Css)

Satch3000 a intrebat.

Am un tabel TD și în dreapta lui vreau să adaug o margine de 1 pixel, așa că am făcut așa:

table td {
    border-right:1px solid #000;
}

Funcționează bine dar problema este că înălțimea bordurii ia înălțimea totală a TD-ului.

Există o modalitate de a seta înălțimea bordurii?

12 răspunsuri
meagar

Nu, nu există. Marginea va fi întotdeauna la fel de înaltă ca și elementul.

Puteți obține același efect prin învelirea conținutului celulei într-un element de tip <span>, și aplicând stiluri de înălțime/margine la aceasta. Sau desenând o linie verticală scurtă într-un PNG cu lățimea de 1 pixel, care are înălțimea corectă, și aplicând-o ca fundal celulei:

background:url(line.png) bottom right no-repeat;

Comentarii

  • Wow, genial. Frumoasă soluție –  > Por Immran Mohammed.
  • Pentru problema mea, primul dvs. rând a răspuns la întrebarea mea. „Marginea va fi întotdeauna la fel de înaltă ca și elementul.” –  > Por John Waclawski.
ReBa

Am o altă posibilitate. Aceasta este, desigur, o tehnică „mai nouă”, dar pentru proiectele mele funcționează suficient.

Funcționează doar dacă aveți nevoie de una sau două margini. Nu am făcut-o niciodată cu 4 margini… și, ca să fiu sincer, nu știu încă răspunsul pentru asta.

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

Sper să te ajute și pe tine, pentru că pentru mine este o soluție de rezolvare ușoară.

Comentarii

  • ESTE MARE. Pentru a o seta vertically centered, am adăugat {top: 30%; height:40%} >> the total ar trebui să însumeze 100% (top:30% va implica bottom:30% deoarece height:40%). De asemenea, setarea em în loc de px ajută. Mult noroc… –  > Por Aakash.
CairoCoder

Da, puteți seta înălțimea liniei după ce ați definit marginea astfel:

border-right: 1px solid;
line-height: 10px;

user379888

Comentarii

  • Doar pentru a adăuga, marginea nu trebuie să fie punctată, acest lucru funcționează perfect! Exact cum te-ai aștepta ca „border-height” (dacă ar exista) să funcționeze. –  > Por SmOg3R.
Byron

Pentru elementele td line-height va permite cu succes redimensionarea înălțimii marginii, așa cum a menționat SPrince.

Pentru alte elemente, cum ar fi elementele de listă, puteți controla înălțimea marginii cu line-height și înălțimea elementului propriu-zis cu margin-top și margin-bottom.

Iată un exemplu funcțional pentru ambele:http://jsfiddle.net/byronj/gLcqu6mg/

Un exemplu cu elemente de listă:

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>

Headshota

Nu, nu puteți seta înălțimea marginii.

cambthompson

Acest lucru va adăuga o margine centrată în stânga celulei, care are 80% din înălțimea celulei. Puteți face trimitere la întregul documentația border-image aici.

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}

Comentarii

  • A funcționat perfect, mulțumesc pentru această sugestie! –  > Por NorahKSakal.
Roy
table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

Apoi, cu codul tău poți:

<td class="rightborder">whatever</td>

Sper că vă ajută!

cdeszaq

În prezent, nu, nu, nu fără a recurge la trucuri. marginile elementelor ar trebui să se extindă pe întreaga lungime a oricărei laturi a casetei elementului la care se aplică.

manjunath vb
.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

//desenează o linie pe partea dreaptă a casetei.mai târziu adaugă o margine-top și o margine-bottom.adică,

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

Acest lucru ar putea ajuta la desenarea unei linii pe partea dreaptă a casetei cu un spațiu în partea de sus și de jos.

user7069368

Aakash

În plus față de răspunsul lui @ReBa de mai sus, acest lucru custom-border clasă este ceea ce a funcționat pentru mine.

Mods:

  • lucrează cu border în loc de backaground-color de la background-color nu este coerentă.
  • Setarea height & top din proprietățile lui :after în așa fel încât totalul să ajungă la 100% unde bottomeste implicit.

Mult noroc…

Kaki

Așa cum au spus toți ceilalți, nu poți controla înălțimea marginii. Dar există soluții de rezolvare, iată ce fac eu:

table {
  position: relative;
}

table::before { /* ::after works too */
  content: "";
  position: absolute;
  right: 0; /* Change direction for a different side*/
  z-index: 100; 
  width: 3px; /* Thickness */
  height: 10px;
  background: #555; /* Color */
}

Puteți seta height la inherit pentru înălțimea tabelului sau calc(inherit - 2px) pentru o margine mai mică cu 2px.Nu uitați, inherit nu are niciun efect atunci când înălțimea tabelului nu este setată.

Utilizați height: 50% pentru o jumătate de margine.

Demo

Karthiga
table td {
    border-right:1px solid #000;
    height: 100%;
}

Trebuie doar să adăugați înălțimea sub proprietatea border.

Comentarii

  • care s-a întâmplat în mod implicit. –  > Por ValRob.

Tags:,