HTML div 태그의 테두리를 설정하는 방법


193

HTML에서 div 태그 주위에 테두리를 정의하려고합니다. 일부 브라우저에서는 테두리가 나타나지 않습니다.

내 HTML 코드는 다음과 같습니다.

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

HTML div 태그의 테두리를 어떻게 설정합니까?

답변:


361

모든 경계 속성에 대해 명시 적으로 시도하십시오. 예를 들면 다음과 같습니다.

border:1px solid black;

테두리 속기 속성을 참조하십시오 . 다른 비트는 선택 사항이지만 일부 브라우저는 너비 또는 색상을 기본값으로 설정하지 않습니다. 귀하의 경우에는 지정하지 않는 한 너비가 0이라는 것이 좋습니다.


1
"px"접미사를 제거해야했습니다.
samis

1
@samis 그것은 당신이하고 싶은 것이 아닙니다.
Joel

29

사용할 수 있습니다

border-width:2px;
border-style:solid;
border-color:black;

또는 속기

border: 2px solid black

17

W3C에 따라 :

테두리 스타일의 초기 값이 '없음'이므로 테두리 스타일을 설정하지 않으면 테두리가 표시되지 않습니다.

즉, solid테두리가 표시되도록 테두리 스타일 (예 :)을 설정해야 합니다. border:thin너비 만 설정합니다. 또한 색상은 기본적으로 텍스트 색상과 동일합니다 (보통 좋지 않은 모양).

세 가지 스타일을 모두 설정하는 것이 좋습니다.

style="border: thin solid black"

5

나는 이것이 당신이 가리키는 곳이라고 생각합니다 ..

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

잘. 다음과 같이 작성해야합니다border-width:thin

여기 링크가 있습니다 (여기를 클릭하십시오) 다양한 유형의 테두리 스타일을 확인하십시오

너비를 픽셀 단위로 작성하여 테두리 너비를 설정할 수도 있습니다 (예 : border-width : 1px). 최소 너비는 1px입니다.


5

당신이 사용할 수있는:

border-style: solid;
border-width: thin;
border-color: #FFFFFF;

그래도 원하는대로 변경할 수 있습니다.


2

더 많은 필드를 설정하고 경계 너비 만 설정하면됩니다. 스타일은 기본적으로 페이지에 테두리를 둡니다. 너비는 두께를 제어하고 색상은 테두리를 만들 색상을 알려줍니다.

border-style: solid; border-width:thin; border-color: #FFFFFF;

1

부트 스트랩 4에서는 테두리 유틸리티를 사용할 수 있습니다 .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style>
  .border-5 {
    border-width: 5px !important;
  }
</style>

<textarea class="border border-dark border-5">some content</textarea>


0
 .centerImge {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height:50%;
    }
 <div>
 @foreach (var item in Model)
{
<span> <img src="@item.Thumbnail"  class="centerImge" /></span>
  <h3 style="text-align:center">  @item.CategoryName</h3>
}
 </div>

-3
<style>
p{border: 1px solid red}
div{border: 5px solid blue}

이스마엘이라고 불러

저녁 늦게 전화하지 마십시오.

이스마엘이라고 불러

저녁 늦게 전화하지 마십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.