p 요소에서 이러한 추가 공백을 제거하는 방법은 무엇입니까?
Ammar Alyousfi
다음은 사례를 보여주는 코드입니다.
HTML
<div class="skill-cat">
<p class="skill-cat-title">Others</p>
<div class="skills">
<p class="skill">Familiar with Mac and Windows operating systems</p>
<p class="skill">Markdown markup language</p>
<p class="skill">Lyx (LaTex typesetting application)</p>
<p class="skill">many of Apple iWork and Microsoft Office applications</p>
<p class="skill">video editing</p>
<p class="skill">working with command-line interface</p>
<p class="skill">research and self-learning</p>
</div>
</div>
CSS
.skill-cat-title {
font-weight: bold;
font-size: 115%;
margin-bottom: 1%;
}
.skills {
display: flex;
flex-wrap: wrap;
margin-bottom: 2%;
}
.skill {
margin: 7px 7px;
padding: 5px;
background-color: gold;
}
CodePen의 코드 및 출력은 https://codepen.io/ammar_/pen/qXgvZg/ 에서 볼 수 있습니다.
뷰포트의 너비가 약 360px이면 텍스트를 포함하지 않는 추가 영역이 나타납니다. 이 영역을 제거하고 싶습니다.
영역은 빨간색 직사각형 내부의 다음 이미지에 표시됩니다.
어떻게 할 수 있습니까?
파완 쿠마르
대신 <p>태그 사용 <span>및 사용 <br>줄 바꿈에 대한 태그입니다. 또한 겹치기 line-height때문에 다르게 설정해야합니다 padding.
.skill-cat-title {
font-weight: bold;
font-size: 115%;
margin-bottom: 1%;
}
.skills {}
.skill {
padding: 5px 5px;
line-height: 25px;
background-color: gold;
}<div class="skill-cat">
<p class="skill-cat-title">Others</p>
<div class="skills">
<span class="skill">Familiar with Mac and Windows operating systems</span><br/><br/>
<span class="skill">Markdown markup language</span><br/><br/>
<span class="skill">Lyx (LaTex typesetting application)</span><br/><br/>
<span class="skill">many of Apple iWork and Microsoft Office applications</span><br/><br/>
<span class="skill">video editing</span><br/><br/>
<span class="skill">working with command-line interface</span><br/><br/>
<span class="skill">research and self-learning</span>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
슬라이더 오른쪽에 추가 공백을 제거하는 방법은 무엇입니까?
- 2
문자열 뒤에 공백을 추가하고 공백을 제거하는 방법은 무엇입니까?
- 3
공유 축이있는 서브 플롯에서 추가 공백을 제거하는 방법은 무엇입니까?
- 4
요소에서 공백을 제거하는 방법은 무엇입니까?
- 5
에코에서 변수 사이에 공백을 추가하는 가장 좋은 방법은 무엇입니까?
- 6
스타일 또는 클래스 이름을 추가하고 웹 구성 요소에서 다른 요소를 제거하는 방법은 무엇입니까?
- 7
Windows 7에서 불필요한 기능과 추가 기능을 제거하는 방법은 무엇입니까?
- 8
LaTex에서 행 사이의 추가 공간을 제거하는 방법은 무엇입니까?
- 9
String에서 TLV (Tag Length Value) 사이에 공백을 추가하는 방법은 무엇입니까?
- 10
두 유니 코드 문자열 사이에 공백을 추가하는 방법은 무엇입니까?
- 11
여러 파일 이름에서 모든 공백을 제거하는 방법은 무엇입니까?
- 12
낙타 케이스 키 이름 사이에 공백을 추가하는 방법은 무엇입니까?
- 13
특정 단어 사이에 공백을 두 개 이상 추가하는 방법은 무엇입니까?
- 14
특정 간격으로 문자열 사이에 공백을 추가하는 방법은 무엇입니까?
- 15
레이어 안의 콘텐츠 앞뒤에 공백을 추가하는 방법은 무엇입니까?
- 16
SAS 문자열 사이에 공백을 추가하는 방법은 무엇입니까?
- 17
SAS 문자열 사이에 공백을 추가하는 방법은 무엇입니까?
- 18
텍스트와 라디오 버튼 사이에 공백을 추가하는 방법은 무엇입니까?
- 19
모든 int와 non-int 값 사이에 공백을 추가하는 방법은 무엇입니까?
- 20
텍스트 끝과 버튼 사이에 공백을 추가하는 방법은 무엇입니까?
- 21
다음 스택 곡선 이미지에 공간 / 여백을 추가하는 방법은 무엇입니까?
- 22
xml의 값 사이에 공백을 추가하는 방법은 무엇입니까?
- 23
다른 높이 div에서 공백을 제거하고 서로 "흡입"하는 방법은 무엇입니까?
- 24
문자 사이의 공백을 제거하고 한 줄에 인쇄하는 방법은 무엇입니까?
- 25
ClassName을 추가하고 React.JS에서 onScroll 이벤트를 제거하는 방법은 무엇입니까?
- 26
Seaborn의 clustermap에서 빈 컬러 바 / cbar에서 큰 공백을 제거하는 방법은 무엇입니까?
- 27
jQuery Validate 플러그인에서 종속 요소의 성공에 유효한 클래스를 종속 요소에 추가하는 방법은 무엇입니까?
- 28
Polymer-요소가있는 페이지에서 Polymer 요소에 포함 된 요소에 대한 작업을 트리거하는 방법은 무엇입니까?
- 29
UITextfield에서 공백을 제한하는 방법은 무엇입니까?
몇 마디 만하겠습니다